angularjs 排序修改删除添加

最新推荐文章于 2020-07-22 18:34:02 发布

未来你好i

最新推荐文章于 2020-07-22 18:34:02 发布

阅读量179

点赞数

本文链接：https://blog.youkuaiyun.com/xzw521/article/details/78837000

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           td{
               width: 150px;
               height: 20px;
           }
       </style>
       <script src="js/angular.min.js"></script>
       <script type="text/javascript">

           var v=angular.module("myApp",[]);
           var now = new Date()
           v.controller("mycont",function($scope){

               var arr=[{"cb":false,
                           "name":"张三",
                           "age":"20",
                           "city":"北京",
                           "time":new Date().getTime()},
                       {"cb":false,"name":"李四","age":"32","city":"上海","time":"896786"},
                       {"cb":false,"name":"王五","age":"45","city":"广州","time":"565674"}

               ];

               $scope.goods=arr;

               $scope.tianjia=function(){

                   var good={"cb":false,"name":$scope.gname,"age":$scope.gage,"city":$scope.gcity,"time":new Date().getTime()};

                   $scope.goods.push(good);

                   $scope.bb=false;

               }

               $scope.name_cha=function($event){

                   var temp=[];

                   var key=$event.keyCode;

                   if(key==13){

                       for(var i=0;i<arr.length;i++){
                           if(arr[i].name.indexOf($scope.name)!=-1){
                               temp.push(arr[i]);
                           }
                       }
                       $scope.goods=temp;
                   }

               }

               var px_falg=true;
               $scope.paixu=function(){

                   if(px_falg){
                       arr.sort(function(a,b){
                           return a.age-b.age
                       });
                   }else{
                       arr.sort(function(a,b){
                           return b.age-a.age
                       });
                   }

                   px_falg=!px_falg;
                   $scope.goods=arr;
               }

               $scope.pil=function(){
                   for(var i=0;i<$scope.goods.length;i++){
                       if($scope.goods[i].cb==true){
                           $scope.goods.splice(i,1);
                           i--;
                       }
                   }

               }

               $scope.shan=function($index){

                   $scope.goods.splice($index,1);

               }

               $scope.xg=function($index){

                   $scope.aa=true;

                   $scope.xiugai=function(){

                       $scope.goods[$index].name=$scope.bname;
                       $scope.goods[$index].age=$scope.bage;
                       $scope.goods[$index].city=$scope.bcity;

                       $scope.aa=false;
                   }

               }

           })

       </script>
   </head>
   <body ng-app="myApp" ng-controller="mycont">

       <h2>管理信息</h2>

       <button ng-click="pil()">批量删除</button>
                
       用户名<input type="text" ng-model="name" ng-keydown="name_cha($event)" />
                
       <select ng-change="paixu(age_px)" ng-model="age_px">


           <option>按年龄倒序</option>
           <option>按年龄正序</option>

       </select>
                
       <button ng-click="bb=true">添加</button>

       <table border="1px" cellpadding="0px" cellspacing="0px">

           <thead>
               <tr>
                   <td><input type="checkbox"/></td>
                   <td>姓名</td>
                   <td>年龄</td>
                   <td>城市</td>
                   <td>录入日期</td>
                   <td>操作</td>
               </tr>
           </thead>
           <tbody>

               <tr ng-repeat="g in goods">
                   <td><input type="checkbox" ng-model="g.cb"/></td>
                   <td>{{g.name}}</td>
                   <td>{{g.age}}</td>
                   <td>{{g.city}}</td>
                   <td>{{g.time|date:"yyyy-MM-dd"}}</td>
                   <td>
                       <button ng-click="xg($index,g.name,g.age,g.city)">修改</button>
                       <button ng-click="shan($index)">删除</button>
                   </td>
               </tr>

           </tbody>
       </table>

       <fieldset style="width: 50px;" ng-show="bb">

           <legend>添加信息</legend>
           姓名：<input type="text" ng-model="gname" />
           年龄：<input type="text" ng-model="gage" />
           城市：<select ng-model="gcity">
               <option>石家庄</option>
               <option>北京</option>
               <option>承德</option>
               <option>邯郸</option>
           </select>
           <button ng-click="tianjia()">ok</button>
       </fieldset>

       <fieldset style="width: 50px;" ng-show="aa">

           <legend>添加信息</legend>
           姓名：<input type="text" ng-model="bname" />
           年龄：<input type="text" ng-model="bage" />
           城市：<select ng-model="bcity">
               <option>石家庄</option>
               <option>北京</option>
               <option>承德</option>
               <option>邯郸</option>
           </select>
           <button ng-click="xiugai(bname,bage,bcity)">ok</button>
       </fieldset>

   </body>
</html>