angular 增删改查

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           td {
               width: 50px;
           }

           * {
               padding: 0px;
               margin: 0px auto;
               margin-top: 50px;
           }
       </style>
       <script type="text/javascript" src="angular-1.5.5/angular.min.js"></script>
   </head>

   <body ng-app="c1" ng-controller="cr1">
       <table border="1px" id="tab" cellpadding="0px" cellspacing="0px" height="150px">
           <tr align="center">
               <th>
                   <input type="button" value="全选 /全不选 " ng-click="box_checked()" />
               </th>
               <th>姓名</th>
               <th>年龄</th>
               <th>性别</th>
               <th>操作</th>
           </tr>
           <tr align="center">
               <td><input type="button" value="批量删除" ng-click="dl()" /></td>
               <td><input type="text" placeholder="请输入用户名" id="se" ng-model="sname" /></td>
               <td><input type="text" placeholder="请输入年龄" id="sa" ng-model="sage" /></td>
               <td><input type="text" placeholder="请输入性别" id="ss" ng-model="ssex" /></td>
               <td><input type="button" value="添加" ng-click="sadd()" id="add" /></td>

           </tr>
           <tr ng-repeat="stu in student" align="center">
               <td><input type="checkbox" ng-click="tt($index)" ng-model="cd"></td>
               <td>{{stu.name}}</td>
               <td>{{stu.age}}</td>
               <td>{{stu.sex}}</td>
               <td><input type="button" value="删除" ng-click="btn($index)"></td>
           </tr>
       </table>
   </body>
   <script>
       //创建模块
       var als = angular.module("c1", []);
       //创建控制器
       als.controller("cr1", function($scope) {

           $scope.student = [{
               "name": "张三",
               "age": 18,
               "sex": "男",
               "flag": false
           }, {
               "name": "李四",
               "age": 28,
               "sex": "男",
               "flag": false
           }, {
               "name": "王晓华",
               "age": 20,
               "sex": "女",
               "flag": false
           }, {
               "name": "赵六",
               "age": 17,
               "sex": "男",
               "flag": false
           }]

           $scope.tt = function($index) {
               $scope.student[$index].flag = !$scope.student[$index].flag;

           }
           $scope.box_checked = function() {
               var f = document.getElementsByTagName("input")
               for(var i = 0; i < f.length - 1; i++) {

                   if(f[i].type == "checkbox") {

                       f[i].checked = !f[i].checked;

                   }
               }
               for(var i = 0; i < $scope.student.length; i++) {
                   $scope.student[i].flag = !$scope.student[i].flag;
               }
           }

           $scope.sadd = function() {
               var ss = {
                   "name": $scope.sname,
                   "age": $scope.sage,
                   "sex": $scope.ssex,
                   "flag": $scope.flag
               }
               $scope.student.push(ss);
           }
           $scope.btn = function($index) {
               $scope.student.splice($index, 1)
           }
           $scope.dl = function() {
               for(var i = $scope.student.length - 1; i >= 0; i--) {
                   if($scope.student[i].flag) {
                       $scope.student.splice(i, 1);
                   }
               }

           }
       })

</script>

效果

</html>

猜你喜欢