angular.js 表格增删改查
来源：互联网 发布：巫师3卡顿优化补丁 编辑：程序博客网 时间：2024/05/16 11:11
<!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>阅读全文
2 0
- angular.js 表格增删改查
- angular JS 实现增删改查
- angular.js 增删改查练习1
- angular Js的增删改查
- angular.js 增删改查练习2
- angular增删查改
- Angular增删查改
- Angular增删改查
- angular 增删改查
- angular 增删改查
- js表格记录增删改查
- js实现表格的增删改查
- js实现表格的增删改查
- js实现表格的增删改查
- 表格增删查改
- 增删改查表格
- angular之增删改查
- angular实现增删改查
- 2.3 const命令
- OI知识总结表
- 2017 6.824学习笔记 Lecture 1: Introduction
- acdream 1015 Double Kings（树的重心）
- Codeforces Round #442 (Div. 2) 总结
- angular.js 表格增删改查
- 自动轮播RollPagerView
- 这是一封给程序员的1024挑战书
- Excel之按原格式复制粘贴工作表
- 大咖云集，技术宅开趴倒计时 —— 2017 Kubernetes Meetup | 成都站
- Docker容器实时迁移的再次尝试
- 算法学习01- 生兔子的问题
- 双指针快速排序
- 第八周项目4稀疏矩阵的三元组表示的实现及应用（1）
