AngularJs(全选.全不选.批量删除.添加)

最新推荐文章于 2019-03-25 11:16:02 发布

duderi1

最新推荐文章于 2019-03-25 11:16:02 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/Noviceduderi/article/details/78740400

版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/angular.min.js"></script>
       <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
       <style>
           * {
               margin: 0px auto;
               padding: 0px;
           }

           #tab {
               width: 400px;
               margin-top: 30px;
           }

           #tab td {
               text-align: center;
           }

           .div1 {
               width: 400px;
           }
       </style>
   </head>

   <body ng-app="mypp" ng-controller="cre">
       <div class="div1">
           商品名称:<input type="text" id="name" ng-model="name" /><br />
           商品价格:<input type="text" id="price" ng-model="price" /><br />
           商品数量:<input type="text" id="count" ng-model="count" /><br />
           <input type="button" value="添加" id="bu1" ng-click="tian()" /><br/>
           </br/>
           <input type="button" ng-click="pi()" value="批量删除" />
       </div>
       <table border="1px" cellspacing="0px" id="tab">
           <tr>
               <td><input type="checkbox" ng-model="checkAll" ng-click="box1()" /></td>
               <td>商品名</td>
               <td>价格</td>
               <td>数量</td>
               <td>操作</td>
           </tr>
           <tr ng-repeat="good in goods">
               <td><input type="checkbox" ng-model="good.ckx" /></td>
               <td>{{good.name}}</td>
               <td>{{good.price}}</td>
               <td>{{good.count}}</td>
               <td><input type="button" value="删除" ng-click="dele($index)" /></td>
           </tr>

       </table>
   </body>
   <script>
       //注入
       var mo = angular.module("mypp", []);
       mo.controller("cre", function($scope) {

           //定义数组
           $scope.goods = [];
           //添加
           $scope.tian = function() {
               var name = $("#name").val();
               var price = $("#price").val();
               var count = $("#count").val();
               //第一种方式Angularjs
               //创建对象
               //var good = {"name":$scope.name,"price":$scope.price,"count":$scope.count};

               //第二种方式jQuery
               //创建对象
               var good = {
                   "name": name,
                   "price": price,
                   "count": count
               };
               //将对象放入数组里
               $scope.goods.push(good);
           }

           //删除方法
           $scope.dele = function($index) {
               $scope.goods.splice($index, 1);
           }

           //全选和全不全
           $scope.box1 = function() {
               var aa = $scope.checkAll;
               if(aa == true) {
                   for(var i = 0; i < $scope.goods.length; i++) {
                       $scope.goods[i].ckx = true;
                   }
               } else {
                   for(var i = 0; i < $scope.goods.length; i++) {
                       $scope.goods[i].ckx = false;
                   }
               }
           }

           //批量删除方法
           $scope.pi = function() {
               for(var i = 0; i < $scope.goods.length; i++) {
                   if($scope.goods[i].ckx == true) {
                       $scope.goods.splice(i, 1);
                       i--;
                   }
               }
           }
       });
   </script>

</html>