AngularJs的点击删除，排序，查询

来源：互联网发布：如何预防网络电信诈骗编辑：程序博客网时间：2024/06/06 02:23

删除，排序，查询

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>week3code</title>
   <script type="text/javascript" src="js/angular.js"></script>

   <script type="text/javascript">

   //定义一个数组
   var user=[
   {id:80,name:"iphone",price:54000},
   {id:1200,name:"ipad mini",price:24000},
   {id:500,name:"ipad air",price:23400},
    {id:29,name:"ipadd",price:14000},
   {id:29,name:"ipads",price:14000},
   {id:910,name:"imac",price:15400}
   ];
   var app=angular.module("myapp",[]);
   //绑定控制器
   app.controller("myctr",function($scope){
        $scope.users=user;
       $scope.order1='name';//排序字段
       $scope.order2='-';//为空时正序为负号时倒序

       $scope.dian=function(dians){
           //点击列标题排序事件
           $scope.order1=dians;
           if ($scope.order2=="-") {
           $scope.order2="";
           } else{
           $scope.order2='-';
           }
       };
       //删除全部
       $scope.removeAll=function(){
           $scope.users=[];
           alert("删除全部");
       }

   //方式1，按下标删除产品，升降序后，删除容易错乱，因为下标在变
   /*$scope.deletes=function(index){
   $scope.users.splice(index,1);*/
   //方式2，按name属性删除
   $scope.deletes=function(name){
       if(name!=""){
           if(confirm("是否删除"+name+"商品")){
           var p;
           for(index in $scope.users){
               p=$scope.users[index];
               if(p.name==name){
                   $scope.users.splice(index,1);
               }
               }
           }
       }
   alert("是否删除商品");
   if($scope.users.length<1){
       alert("删除全部");
   };
   }
})
</script>
   </head>
<body ng-app="myapp" ng-controller="myctr">
<table cellpadding="10" cellspacing="0" border="1">
   
    <tr style="background-color:#DCDCDC;">
      <td colspan="4"><input type="text" ng-model="ss" placeholder="产品名称">

      <button ng-click="removeAll()">查询/删除全部</button>
       产品价格：
      <select>
      <option>1000-20000</option>

      </select>
      </td>
   </tr>

   <tr>
       <th ng-click="dian('id')">产品编号</th>
       <th ng-click="dian('name')">产品名称</th>
       <th ng-click="dian('price')">产品价格</th>
   </tr>

   <tr ng-repeat="x in users |filter:{'name':ss} |orderBy:(order2+order1)">
   <td>{{x.id}}</td>
   <td>{{x.name}}</td>
   <td>{{x.price|currency:'RMB￥'}}

   
      
      <button ng-click="deletes(x.name)">删除</button>
   </td>
</tr>
</table>
</body>
</html>

阅读全文

0 0