<!DOCTYPE html> <html ng-app="MyApp"> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.0.js"></script> <title></title> <script type="text/javascript"> var flag = false; var app=angular.module("MyApp",[]); app.controller("myCtrl",function($scope){ $scope.data=[ {che1:"c0",id:1, name:"张三", password:"123", age:10, sex:"男", state:false}, {che1:"c1",id:2, name:"李四", password:"123", age:22, sex:"女", state:false}, {che1:"c2",id:3, name:"王五", password:"123", age:34, sex:"男", state:false}, {che1:"c3",id:4, name:"赵六", password:"123", age:15, sex:"男", state:false}, ]; $scope.ageFan = function(age,ageSize){ var arr = ageSize.split("-"); var min = arr[0]; var max = arr[1]; if(ageSize == "不限"){ return true; }else { if (age > min && age < max) { return true; } else { return false; } } } //全部删除 $scope.deleteAll = function () { for(i=0;i<$scope.data.length;i++){ $scope.data.splice(i,$scope.data.length); } } var id=5; //点击按钮添加 $scope.add=function(){ $scope.data.push({ id:id++, name:$scope.name, password: $scope.password, age: $scope.age, sex: $scope.sex, state:false }) $scope.name = ""; $scope.password = ""; $scope.age = ""; $scope.sex = ""; $scope.addUserIsShow = false; } $scope.addUser=function(){ $scope.addUserIsShow=true; } //批量删除 $scope.deletePi = function(){ var flag = true; //for遍历所有数据,判断状态是否为true,是true就证明选中了. for(i = 0;i<$scope.data.length;i++){ //选中了就会执行删除splice方法,删除的时候下表会跟随变化,所以要i. if($scope.data[i].state == true){ $scope.data.splice(i,1); flag=false; i--; } } //如果flag执行到这等于false那么就证明有选中的,如果等于true就证明没走if里面的方法 if(flag){ alert("请勾选条目"); } } $scope.swithAll = function(){ for(i = 0;i<$scope.data.length;i++){ if($scope.che == true) { $scope.data[i].state = true; }else{ $scope.data[i].state = false; } } } /***paixi*/ $scope.px=function(){ if($scope.age1==2){ flag=true; }else{ flag=false; }. $scope.data.sort(function(a,b){ if(flag){ return a.age> b.age ? 1:-1; }else{ return a.age< b.age ? 1:-1; } }); } $scope.editUser = function (index) { var x=$scope.data[index]; $scope.e_name= x.name; $scope.e_password=""; $scope.e_age=""; $scope.e_sex=""; $scope.ewwwww=true; $scope.index=index; } $scope.edit=function(){ if($scope.e_name==null || $scope.e_name==""){ alert("用户名不能为空"); return; } if($scope.e_password==null || $scope.e_password==""){ alert("密码不能为空"); return; } if(!/^\d+$/.test($scope.e_age)){ alert("年龄必须为整数"); return; } if($scope.e_sex==null || $scope.e_sex==""){ alert("性别不能为空"); return; } $scope.data[$scope.index].name=$scope.e_name; $scope.data[$scope.index].password=$scope.e_password; $scope.data[$scope.index].age=$scope.e_age; $scope.data[$scope.index].sex=$scope.e_sex; $scope.ewwwww=false; }; // $scope.order2 = function(){ // alert($scope.age1); // if($scope.age1==2){ // flag = true; // }else{ // flag= false; // } // data.sort(function(a , b){ // if(flag){ // return a.age > b.age ? 1 : -1; // }else{ // return a.age < b.age ? 1 : -1; // } // }) // } }); </script> </head> <body ng-controller="myCtrl"> <div>查找:<input type="text" ng-model="chazhao" placeholder="输入用户名"> 年龄:<select ng-model="ageSize" ng-init="ageSize='不限'"> <option>不限</option> <option>0-11</option> <option>12-20</option> <option>21-30</option> <option>31-40</option> <option>41-50</option> </select> <button ng-click="deleteAll()">全部删除</button> <button ng-click="deletePi()">批量删除</button> 排序:<select ng-model="age1" ng-change="px()"> <option value="">反序</option> <option value="2">正序</option> </select> </div> <div style="margin-top: 15px"> <table border="1"> <tr> <th><input type="checkbox" ng-click="swithAll()" ng-model="che"></th> <th>ID</th> <th>用户名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> <tr ng-repeat="x in data | filter:{name:chazhao}"> <th><input type="checkbox" id={{x.che}} ng-model="x.state"></th> <th>{{x.id}}</th> <th>{{x.name}}</th> <th>{{x.password}}</th> <th>{{x.age}}</th> <th>{{x.sex}}</th> <th><button ng-click="editUser($index)">修改内容</button></th> </tr> </table> </div> <div style="margin-top:16px "> <button ng-click="addUser()">添加用户</button> <div ng-show="addUserIsShow"> <table border="1px"> <tr> <td>用户名:</td> <td> <input type="text" ng-model="name"> </td> </tr> <tr> <td>密 码:</td> <td> <input type="text" ng-model="password"> </td> </tr> <tr> <td>年 龄:</td> <td> <input type="text" ng-model="age"> </td> </tr> <tr> <td>性 别:</td> <td> <input type="text" ng-model="sex"> </td> </tr> <tr> <td colspan="2" align="center"> <button ng-click="add()">提交</button> </td> </tr> </table> </div> <div ng-show="ewwwww"> <table border="1"> <tr> <td> 用户名: </td> <td> <input type="text" ng-model="e_name" disabled/> </td> </tr> <tr> <td> 密码: </td> <td> <input type="text" ng-model="e_password"/> </td> </tr> <tr> <td> 年龄: </td> <td> <input type="text" ng-model="e_age"/> </td> </tr> <tr> <td> 性别: </td> <td> <input type="text" ng-model="e_sex"/> </td> </tr> <tr> <td colspan="2" align="center"> <button ng-click="edit()">提交</button> </td> </tr> </table> </div> </div> </body> </html>
angular.js 表格增删改查
猜你喜欢
转载自blog.csdn.net/zh_binfgan/article/details/78332886
今日推荐
周排行