angular-简单的删除全选demo

来源：互联网发布：mac优酷客户端编辑：程序博客网时间：2024/06/10 03:27
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <script type="text/javascript" src="angular.js"></script>    <script src="jquery.1.12.4.js"></script>    <title>angular删除-添加-全选操作</title>    <script>        var app= angular.module("myApp",[]);        var data=[            {                done:false,                id:"1234",                name:"ipad",                price:3400,                only:10            },            {                done:false,                id:1244,                name:"iphone",                price:6400,                only:5            },            {                done:false,                id:1334,                name:"mypad",                price:4400,                only:20            },            {                done:false,                id:8234,                name:"zpad",                price:8400,                only:130            }        ]        app.controller("myCtrl",function($scope){            $scope.data=data            $scope.del=function(deletename){                var con = confirm("你确认要删除么？");                if(con == true){                    for(var i=0;i<$scope.data.length;i++){                        if($scope.data[i].name==deletename){                            $scope.data.splice(i,1);                        }                    }                }            }            $scope.deleteAll=function(deletename){                var con = confirm("你确认要删除么？");                if(con == true){                    for(var i=0;i<$scope.data.length;i++){                        if($scope.data[i].done==true){                            $scope.data.splice(i,1);                            i--;                        }else if($scope.data.length-1){                            alert("请选择删除项目");                        }                    }                }            }            $scope.checkall=function(){                for(var i=0;i<$scope.data.length;i++){                    if($scope.quan == true){                        $scope.data[i].done=true;                    }else{                        $scope.data[i].done=false;                    }                }            }            $scope.name="";            $scope.ff=true;            $scope.or=function(name)            {                $scope.name=name;            }            $scope.sousuo="";            console.log($scope.sousuo);        });    </script></head><body ng-app="myApp" ng-controller="myCtrl">   <h3>商品库存信息管理</h3>   <div>        <input type="text" placeholder="请输入关键字..." ng-model="sousuo">       <button style="color: #ff0000" ng-click="deleteAll()">批量删除</button>   </div>   <table style="text-align: center" border="1">         <tr>             <td><input type="checkbox" ng-click="checkall()" ng-model="quan"></td>             <td ng-click="or('id')">商品编号</td>             <td ng-click="or('name')">商品名称</td>             <td>商品价格</td>             <td>商品库存</td>             <td>库存操作</td>         </tr>       <tr ng-repeat="x in data|filter:sousuo|orderBy:name">           <td><input type="checkbox" ng-model="x.done" ></td>           <td>{{x.id}}</td>           <td>{{x.name}}</td>           <td>{{"¥:"+x.price}}</td>           <td>{{x.only}}</td>           <td><button ng-click="del(x.name)">删除</button></td>       </tr>   </table></body></html>
阅读全文
0 0