全_sochip v40-CSDN博客

本文链接：https://blog.csdn.net/zl52104/article/details/80158470

<!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>
       <script type="text/javascript">
           var app = angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){

               //准备数据源
               $scope.goods = [
                       {"id":"201","name":"冰激凌","price":3,"brand":"蒙牛"},
                       {"id":"202","name":"老冰棍","price":1,"brand":"老北京"},
                       {"id":"203","name":"西瓜","price":10,"brand":"麒麟"},
                       {"id":"204","name":"可乐","price":5,"brand":"百事"}];
               //过滤条件
               $scope.searchKey;
               //排序条件
               $scope.orderByKey;
               //删除通过索引删除一条，，如果重新排序了，就会有bug
//               $scope.deletGoodsByindex = function(i){
//                   $scope.goods.splice(i,1);//
//               }

               //通过id删除，没有任何bug
               $scope.deletGoodsById = function(_id){
                   //得到_id在数据源中的索引号
                   //循环遍历得到每一个商品，用它的id和_id比较
                   for(var i=0;i<$scope.goods.length;i++){
                       var g = $scope.goods[i];//得到一个商品
                       if(g.id == _id){//此g就是要删除的，，删除之
                           $scope.goods.splice(i,1);
                           break;
                       }
                   }
               };

               //全选的属性
               $scope.checkall = false;
               //添加功能区域
               $scope.addIsShow = false;
               $scope.newname;
               $scope.newprice;
               $scope.newbrand;
               $scope.addNewGood = function(){
                   var n = Math.round(Math.random()*100);//随机数作为id
                   //创建新商品对象,属性赋值
                   var a = {};
                   a.id = n;
                   a.name = $scope.newname;
                   a.price = $scope.newprice;
                   a.brand = $scope.newbrand;
                   //添加到数组
                   $scope.goods.push(a);
                   $scope.addIsShow = false;//设置隐藏
               }
               //修改
               $scope.updateGood;
               $scope.updateIsShow = false;//修改区域默认不显示
               $scope.updatename;
               $scope.updateprice;
               $scope.updatebrand;
               $scope.showGoodById = function(_id){

                   $scope.updateIsShow = true;//显示修改区域
                   //回显修改商品的信息，，先通过遍历数据源，找到要修改的商品对象
                   for(var i=0;i<$scope.goods.length;i++){
                       if($scope.goods[i].id==_id){//找到了要修改的商品信息
                           $scope.updateGood = $scope.goods[i];//收集修改对象
                           break;
                       }
                   }
                   //找到要修改的对象后，显示在页面中，数据绑定
                   $scope.updatename=$scope.updateGood.name;
                   $scope.updateprice=$scope.updateGood.price;
                   $scope.updatebrand=$scope.updateGood.brand;
               }
               //提交修改信息到数据源
               $scope.updateGoodF = function(){
                   $scope.updateIsShow = false;//隐藏修改区域
                   $scope.updateGood.name = $scope.updatename;
                   $scope.updateGood.price = $scope.updateprice;
                   $scope.updateGood.brand = $scope.updatebrand;

               }
               //批量删除
               $scope.deleteMore = function(){
                   //获取所有选择的checkbox
                   var cks = $("input[type=checkbox]:checked");
                   for(var i=0;i<cks.length;i++){
                       var ck = cks[i];
                       var _id = ck.value;//得到要删除的商品的id
                       for(var j=0;j<$scope.goods.length;j++){//到数据源中找到和当前id匹配的商品，删除之
                           if($scope.goods[j].id == _id){
                               $scope.goods.splice(j,1);
                               break;
                           }
                       }
                   }
               }


           });
       </script>
       <style type="text/css">
           table{
               text-align: center;
           }
           .red{
               background-color: red;
           }
           .green{
               background-color: green;
           }
       </style>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           查询：<input type="text" ng-model="searchKey" />  
           排序条件:<select ng-model="orderByKey">
               <option value="">--请选择--</option>
               <option value="name">--按名字正序--</option>
               <option value="-name">--按名字倒序--</option>
               <option value="price">--按价钱正序--</option>
               <option value="-price">--按价钱倒序--</option>
               <option value="id">--按id正序--</option>
               <option value="-id">--按id倒序--</option>
           </select>
           <input type="button" value="入库" ng-click="addIsShow=true"/>
           <br /><br />
           <div ng-show="addIsShow">
               名字：<input type="text" ng-model="newname" /><br />
               价钱：<input type="text" ng-model="newprice" /><br />
               产地：<input type="text" ng-model="newbrand" /><br />
               <input type="button" value="添加" ng-click="addNewGood();" /><br />
           </div>
           <input style="text-align: right;" type="button" value="批量删除" ng-click="deleteMore();"/>
           <table width="400px" border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px" >
               <tr style="background-color: grey;">
                   <td><input type="checkbox" ng-model="checkall"/></td>
                   <td>序号</td>
                   <td>id</td>
                   <td>名字</td>
                   <td>价格</td>
                   <td>品牌</td>
                   <td>操作</td>
               </tr>
               <tr ng-repeat="g in goods |filter:searchKey | orderBy:orderByKey" class="{{$index%2==0?'red':'green'}}">
                   <td><input type="checkbox" value="{{g.id}}" ng-model="checkall" /></td>
                   <td>{{$index+1}}</td>
                   <td>{{g.id}}</td>
                   <td>{{g.name}}</td>
                   <td>{{g.price}}</td>
                   <td>{{g.brand}}</td>
                   <td>
                       <input type="button" value="删除" ng-click="deletGoodsById(g.id);"/>
                       <input type="button" value="修改" ng-click="showGoodById(g.id);"/>
                   </td>
               </tr>
           </table>
           <div ng-show="updateIsShow">
               名字：<input type="text" ng-model="updatename" /><br />
               价钱：<input type="text" ng-model="updateprice" /><br />
               产地：<input type="text" ng-model="updatebrand" /><br />
               <input type="button" value="提交修改" ng-click="updateGoodF();" /><br />
           </div>


       </center>
   </body>
</html>