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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wuzhanbin/article/details/78009280

 删除,排序,查询

<!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¥'}}
    
     <!--
          方式1 按下标$index删除
      
     <button ng-click="deletes($index)">删除</button>-->
      <!--
          方式2,按name删除
     -->
      <button ng-click="deletes(x.name)">删除</button>
     </td>
  </tr>
 </table>    
 </body>
</html>


展开阅读全文

没有更多推荐了,返回首页