AngularJS增删查改

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           #tianjia input{
               display: block;
           }
       </style>
       <script src="js/angular.js"></script>
       <script>
           var app = angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               $scope.products = [{
                   id:7,
                   pname:"OPPO R9sk",
                   uname:"关羽",
                   tel:15777777777,
                   price:4999,
                   city:"北京",
                   regDate:"03-09 10:00",
                   astate:"已发货",
                   state:false
               },{
                   id:12,
                   pname:"vivo X20",
                   uname:"赵云",
                   tel:13569852200,
                   price:2998,
                   city:"上海",
                   regDate:"08-22 10:00",
                   astate:"已发货",
                   state:false
               },{
                   id:1,
                   pname:"iphone 8plus",
                   uname:"曹操",
                   tel:15200698563,
                   price:7588,
                   city:"北京",
                   regDate:"09-04 10:00",
                   astate:"已发货",
                   state:false
               },{
                   id:11,
                   pname:"华为畅享6S",
                   uname:"刘备",
                   tel:13922006666,
                   price:899,
                   city:"天津",
                   regDate:"08-09 10:00",
                   astate:"未发货",
                   state:false
               },{
                   id:10,
                   pname:"小米Note5",
                   uname:"黄忠",
                   tel:13796258864,
                   price:699,
                   city:"重庆",
                   regDate:"02-28 10:00",
                   astate:"未发货",
                   state:false
               },{
                   id:9,
                   pname:"魅蓝 5S",
                   uname:"夏侯淳",
                   tel:15777235489,
                   price:999,
                   city:"深圳",
                   regDate:"10-03 10:00",
                   astate:"已发货",
                   state:false
               },{
                   id:8,
                   pname:"努比亚 Z17",
                   uname:"孙权",
                   tel:15333333333,
                   price:2099,
                   city:"上海",
                   regDate:"07-01 10:00",
                   astate:"未发货",
                   state:false
               },{
                   id:15,
                   pname:"红*5A",
                   uname:"周瑜",
                   tel:18355697781,
                   price:599,
                   city:"广州",
                   regDate:"11-11 00:12",
                   astate:"未发货",
                   state:false
               }];
                   $scope.searchName = "";
                   $scope.searchTel = "";

                   //删除
                   $scope.del = function(clumn){
                       for(index in $scope.products){
                           if($scope.products[index].id == clumn){
                               $scope.products.splice(index,1);
                           }
                       }
                   };

                   //全选、全不选
                   $scope.checkAll = false;
                   $scope.checkAllFun = function(){
                       if($scope.checkAll){
                           for(index in $scope.products){
                               $scope.products[index].state = true;
                           }
                       }
                       else{
                           for(index in $scope.products){
                               $scope.products[index].state = false;
                           }
                       }
                   };

                   //批量删除
                   $scope.plDel = function(){
                       var arr = [];
                       for(index in $scope.products){
                           if($scope.products[index].state){
                               arr.push($scope.products[index]);
                           }
                       }
                       if(confirm("您确定要删除?")){
                           for(index1 in arr){
                               for(index2 in $scope.products){
                                   if(arr[index1].id == $scope.products[index2].id){
                                       $scope.products.splice(index2,1);
                                   }
                               }
                           }
                       }
                   };

                   //新增用户
                   $scope.add = function(){
                       var reg = /米/g;
                       var miname = $scope.add_pname.replace(reg,"*");
                       var p = {
                           id:$scope.add_ID,
                           pname:miname,
                           uname:$scope.add_uname,
                           tel:$scope.add_tel,
                           price:$scope.add_price,
                           city:$scope.add_city,
                           regDate:$scope.add_regDate,
                           astate:$scope.add_astate
                       }
                       $scope.products.push(p);
                       $scope.add_ID = "";
                       $scope.add_pname = "";
                       $scope.add_uname = "";
                       $scope.add_tel = "";
                       $scope.add_price = "";
                       $scope.add_city = "";
                       $scope.add_regDate = "";
                       $scope.add_astate = "";
                       $scope.isshow = false;
                   };

                   //批量发货
                   $scope.plfh = function(){
                       for(index in $scope.products){
                           if($scope.products[index].state){
                               $scope.products[index].astate = "已发货";
                               $scope.products[index].state = false;
                           }
                       }
                   }
           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h3>展示商品页面</h3>
           <input type="text" placeholder="用户名搜索" ng-model="searchName"/>
           <input type="text" placeholder="手机号搜索" ng-model="searchTel"/>
           <select ng-model="xzcity">
               <option value="">请选择城市</option>
               <option>北京</option>
               <option>上海</option>
               <option>天津</option>
               <option>重庆</option>
               <option>深圳</option>
               <option>广州</option>
           </select>
           <select ng-model="xzastate">
               <option value="">请选择状态</option>
               <option>未发货</option>
               <option>已发货</option>
           </select><br /><br />
           <button ng-click="isshow = true">新增订单</button>
           <button ng-click="plDel()">批量删除</button>
           <button ng-click="plfh()">批量发货</button><br /><br />
           <table border="1px" cellpadding="10" cellspacing="0">
           <thead align="center">
               <tr>
                   <th><input type="checkbox" ng-model="checkAll" ng-click="checkAllFun()"/></th>
                   <th>ID</th>
                   <th>商品名</th>
                   <th>用户名</th>
                   <th>手机号</th>
                   <th>价格</th>
                   <th>城市</th>
                   <th>下单时间</th>
                   <th>状态</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody align="center">
               <tr ng-repeat="pro in products | filter:{uname:searchName} | filter:{tel:searchTel} | filter:{city:xzcity} | filter:{astate:xzastate}">
                   <td><input type="checkbox" ng-model="pro.state"/></td>
                   <td>{{pro.id}}</td>
                   <td>{{pro.pname}}</td>
                   <td>{{pro.uname}}</td>
                   <td>{{pro.tel}}</td>
                   <td><span ng-hide="xsinput">{{pro.price | currency:"￥"}}</span><span ng-show="xsinput"><input type="text" ng-model="pro.price"/><button ng-click="xsinput = false">保存</button></span></td>
                   <td>{{pro.city}}</td>
                   <td>{{pro.regDate}}</td>
                   <td>
                       <span ng-if="pro.astate == '未发货'">
                           <a href="#" ng-click="pro.astate = '已发货'">{{pro.astate}}</a>
                       </span>
                       <span ng-if="pro.astate == '已发货'">
                           已发货
                       </span>
                   </td>
                   <td><button ng-click="xsinput = true">修改</button> <button ng-click="del(pro.id)">删除</button></td>
               </tr>
           </tbody>
           </table>
           <div id="tianjia" ng-show="isshow">
               <h3>添加商品</h3>
               ID:<input type="text" placeholder="请输入ID" ng-model="add_ID"/>
               商品名:<input type="text" placeholder="请输入商品名称" ng-model="add_pname"/>
               用户名:<input type="text" placeholder="请输入用户名" ng-model="add_uname"/>
               手机号:<input type="text" placeholder="请输入手机号" ng-model="add_tel"/>
               价格:<input type="text" placeholder="请输入商品价格" ng-model="add_price"/>
               城市:<input type="text" placeholder="请输入所在城市" ng-model="add_city"/>
               下单时间:<input type="text" placeholder="请输入下单时间" ng-model="add_regDate"/>
               状态:<input type="text" placeholder="请输入状态" ng-model="add_astate"/>
               <button ng-click="add()">保存</button>
           </div>
       </center>
   </body>
</html>

猜你喜欢