angular的弹出框

来源：互联网发布：php跳转代码编辑：程序博客网时间：2024/05/22 12:40
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--导入angular包-->    <script src="angular-1.5.5/angular.js"></script>    <script>        /*声明模块*/        var myapp=angular.module("myapp",[]);        /*为模块添加控制器*/        myapp.controller("myCtrl",function ($scope) {            /*创建数组*/            $scope.data=[                {                    done:false,                    dec:'选项卡第一项',                    title:1                },                {                    done:false,                    dec:'选项卡第二项',                    title:2                },                {                    done:false,                    dec:'选项卡第三项',                    title:3                },                {                    done:false,                    dec:'选项卡第四项',                    title:4                }            ];            /*点击事件:判断弹出框*/            $scope.btn=function () {                var n=0;                var j=0;                for(var i=0;i<$scope.data.length;i++)                {                    if($scope.data[i].done==true)                    {                        n++;                        j=i;                    }                }                if(n==1)                {                    alert($scope.data[j].title);                }                else if(n==0)                {                    alert("请选择");                }                else {                    alert("只能勾选一个");                }            }        })    </script>    <!--样式-->    <style>        td{            width: 120px;            height: 40px;            border: 1px solid #000000;        }        table{            border-collapse: collapse;            margin-top: 10px;        }    </style></head><!--ng-app,ng-controller--><body ng-app="myapp" ng-controller="myCtrl"><!--点击事件--><button ng-click="btn()">确认</button><table>    <!--遍历-->    <tr ng-repeat="item in data">        <td><input type="checkbox" ng-model="item.done"></td>        <td>{{item.dec}}</td>    </tr></table></body></html>
阅读全文
0 0