您的位置：首页 > Web前端 > AngularJS

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

2017-12-07 13:37 489 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航