angularjs checkbox

最新推荐文章于 2021-01-28 09:42:14 发布

转载最新推荐文章于 2021-01-28 09:42:14 发布 · 1.1k 阅读

文章标签：

#angularjs #checkbox

angularjs 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个使用AngularJS框架创建的简单应用示例。该示例通过Checkbox展示了如何操作和展示数据。具体实现了学生名单中选中状态的动态更新，并实时显示为JSON格式。

<!DOCTYPE html>
<html ng-app="my_app">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("my_app", []);
        app.controller('my_controller', function ($scope) {
            var vm = $scope.vm = {};
            vm.Students = [
                { id: 1, name: '张三', ischecked: 1 },
                { id: 2, name: '李四', ischecked: 0 },
                { id: 3, name: '王武', ischecked: 1 },
                { id: 4, name: '马骝', ischecked: 0 }
            ]
            $scope.getJson = function () {
                document.getElementsByTagName("pre")[0].innerHTML = JSON.stringify(vm.Students, null, 2);
            }
            $scope.getJson();
        });
    </script>
</head>
<body ng-controller="my_controller">
    <div>
        <table>
            <tr>
                <td ng-repeat="item in vm.Students">
                    <input type="checkbox" ng-model="item.ischecked" ng-checked="item.ischecked==1" ng-true-value="1" ng-false-value="0" ng-click="getJson();" />{{item.name}}
                </td>
            </tr>
        </table>
        <pre></pre>
    </div>
</body>
</html>