AngularJS 中 CheckBox的简单案例

最新推荐文章于 2020-12-24 10:55:04 发布

原创最新推荐文章于 2020-12-24 10:55:04 发布 · 920 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS 中 CheckBox #splice #push #ng-model #ng-value

效果初现专栏收录该内容

108 篇文章

订阅专栏

本文介绍了一个简单的AngularJS应用实例，该实例使用CheckBox组件实现多选功能，并通过AngularJS的双向数据绑定特性，实时更新选中的选项。代码展示了如何定义CheckBox的点击事件、如何将选中的值保存到数组中及如何在点击按钮时获取这些选中项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 中 CheckBox的简单案例</title>
    <script src="../js/angular.js"></script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function ($scope) {
            $scope.data = [
                {
                  key:"A",
                  value:"A：紫气东来"
                },
                {
                    key:"B",
                    value:"B：西天极乐"
                },
                {
                    key:"C",
                    value:"C：南极仙翁"
                },
                {
                    key:"D",
                    value:"D：北国风光"
                }
            ];
            
            //定义空数组
            $scope.arr = [];
            //点击选项时的点击事件
            $scope.fun = function (flag,text) {
                //当flag标志位为true时,即此时选中某一选项，就使用push方法添加对应的选项值到数组中最后的位置
                if(flag){
                    $scope.arr.push(text);
                }else {
                    //否则，当flag标志位为false时,遍历数组内容，删除点击的选项值对应的数组数据
                    for (i in $scope.arr){
                        if ($scope.arr[i] == text){
                            $scope.arr.splice(i,1);
                        }
                    }
                }
            }

            //点击“选择”按钮时的点击事件
            $scope.check = function () {
              //当选择的选项内容没有添加到数组中时，即一项都没选中，此时数组长度为0，就弹出提示：  请选择选项所代表的内容！
              if ($scope.arr.length == 0){
                  alert("请选择选项！");
              }
              //如果此时选中某一选项，就弹出对应的选项值
              else {
                  alert($scope.arr);
              }
            };
        });
    </script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <center>
        请问，你喜欢下面哪个成语呢？     &nbsp;&nbsp;&nbsp;
        <button ng-click="check()">我选择</button>
        <ul ng-repeat="i in data">
            <!--   ng-value="i.key"：此时input标签的值是遍历数组的key值；
                   ng-model="flag"：input标签的值绑定flag的值，决定了点击事件的flag值；
                   ng-click="fun(flag,i.key)"：添加点击事件，根据flag值是true或false选择或删除遍历数组所得的key值 -->
            <input type="checkbox"
                   ng-value="i.key"
                   ng-model="flag"
                   ng-click="fun(flag,i.key)"
            />
            {{i.value}}
        </ul>
    </center>
</body>
</html>