AngularJS 中 CheckBox的简单案例

来源：互联网发布：域名国外申请做跳转编辑：程序博客网时间：2024/04/30 15:17
<!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>
阅读全文
0 0