Angular排序删除功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>moni</title>
  <script src="../Angularjs/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("myCtrl",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("删除全部");
        }
    $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);
                }
            }
            }
        } 
   }
 })
 </script>    
    </head>
<body ng-app="myApp" ng-controller="myCtrl">
 <table cellpadding="10" cellspacing="0" border="1">
    <tr style="background-color:#f00;">
      <td colspan="4"><input type="text" ng-model="ss" placeholder="产品名称">
      <button ng-click="removeAll()">查询/删除全部</button>
      </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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值