AngularJS 中 CheckBox的简单案例

最新推荐文章于 2023-10-03 22:55:05 发布

Dewey666

最新推荐文章于 2023-10-03 22:55:05 发布

阅读量854

点赞数

分类专栏：效果初现文章标签： AngularJS 中 CheckBox splice push ng-model ng-value

本文链接：https://blog.csdn.net/IT666DHW/article/details/78288518

版权

效果初现专栏收录该内容

108 篇文章 3 订阅

订阅专栏

<!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>