angularjs-增删改查+排序
来源：互联网 发布：kylin apache 编辑：程序博客网 时间：2024/05/21 19:21
<!DOCTYPE html><html ng-app="myApp"><head> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.0.js"></script> <script type="text/javascript" src="jquery.1.12.4.js"></script> <title>Title</title> <script type="text/javascript"> var app=angular.module("myApp",[]); app.controller("myCtrl",function ($scope) { var id = 6; //添加默认数据 $scope.data=[ { done:false, id: 1, name: "曹操", password: "123456", age: 45, sex: "男" }, { done:false, id: 2, name: "张辽", password: "123456", age: 34, sex: "男" }, { done:false, id: 3, name: "司马懿", password: "123456", age: 30, sex: "男" }, { done:false, id: 4, name: "夏侯淳", password: "123456", age: 40, sex: "男" }, { done:false, id: 5, name: "蔡文姬", password: "123456", age: 18, sex: "女" } ]; //年龄区间查询 $scope.ageTest=function (age,ageSize) { if(ageSize!="---请选择--"){ var ages=ageSize.split("-"); var ageMin = ages[0]; var ageMax = ages[1]; if(age<ageMin||age>ageMax){ return false; }else{ return true; } }else{ return true; } }; //全部删除 $scope.alldelete=function ($index) { if($scope.data.length>=0){ $scope.data.splice($index); } }; //删除单个的 $scope.deleteData=function ($index) { if($index>=0){ $scope.data.splice($index,1); } }; //删除选中的 $scope.delete1=function () { for(var i=0;i<$scope.data.length;i++) { if($scope.data[i].done==true) { $scope.data.splice(i,1); i--; } } } //点击全选 $scope.checkAll=function () { for(var i=0;i<$scope.data.length;i++) { if($scope.chec==true) { $scope.data[i].done=true; } else{ $scope.data[i].done=false; } } $scope.num=0; for(var i=0;i<$scope.data.length;i++) { if($scope.data[i].done==true) { $scope.num+=$scope.data[i].price*$scope.data[i].count; } } }; //显示添加用户表单 $scope.addData=function () { $scope.add_data_show=true; } //提交表单添加用户 $scope.addshow=function () { if($scope.name==undefined||$scope.name==""){ alert("请输入用户名"); return; }//判断用户名为空 if($scope.password==undefined||$scope.password==""){ alert("请输入密码"); return; }//判断密码为空 if($scope.age==undefined||$scope.age==""){ alert("请输入年龄"); return; }//判断年龄为空 if($scope.sex==undefined||$scope.sex==""){ alert("请输入性别"); return; }//判断性别为空 for(var i=0;i<$scope.data.length;i++){ if ($scope.name == $scope.data[i].name) { alert("名称不可重复！"); return; } }//判断添加名字不可以重复 if($scope.password.length<=6){ alert("密码长度必须大于等于6"); return; }//判断密码长度 if($scope.name=="习大大"){ $scope.data.push({ id:id++, name:"****", password:$scope.password, age:$scope.age, sex:$scope.sex }); $scope.name=""; $scope.password=""; $scope.age=""; $scope.sex=""; $scope.add_data_show=false; }else{ $scope.data.push({ id:id++, name:$scope.name, password:$scope.password, age:$scope.age, sex:$scope.sex }); $scope.name=""; $scope.password=""; $scope.age=""; $scope.sex=""; $scope.add_data_show=false; } } //显示修改类列表 $scope.updateData=function ($index) { $scope.names = $scope.data[$index].name; $scope.epwd_index = $index; $scope.update_data_show=true; } //修改数据 $scope.updateshow = function () { var user = $scope.data[$scope.epwd_index]; if ($scope.oldpassword == undefined || $scope.oldpassword == "") { alert("请输入旧密码！"); return; } if ($scope.newpassword == undefined || $scope.newpassword == "") { alert("请输入新密码！"); return; } if ($scope.qrpassword == undefined || $scope.qrpassword == "") { alert("请再次确认密码！"); return; } if ($scope.oldpassword != user.password) { alert("旧密码不正确！"); return; } if ($scope.newpassword != $scope.qrpassword) { alert("两次密码不一致！"); return; } $scope.data[$scope.epwd_index].password = $scope.newpassword; // 修改密码 $scope.update_data_show = false; }; }); </script></head><body><div ng-controller="myCtrl" style="width: 1000px; height: 1000px; background-color:mediumslateblue; margin:0 auto"> <div style="text-align: center"> <h1>用户信息表</h1> <input type="text" value="" placeholder="用户名查询" ng-model="search"> 年龄:<select id="age" ng-model="ageSize" ng-init="ageSize='---请选择--'"> <option>---请选择--</option> <option>10-20</option> <option>21-30</option> <option>31-40</option> <option>41-50</option> <option>51-60</option> </select> 性别:<select ng-model="sexs"> <option selected = "selected" value="">---请选择--</option> <option>男</option> <option>女</option> </select> 排序:<select ng-model="search2"> <option value="">---请选择--</option> <option value="">id正序</option> <option value="-">id倒序</option> </select> <button ng-click="alldelete()">全部删除</button> <button ng-click="delete1($index)">批量删除</button> </div> <table border="1" cellspacing="0" cellpadding="0" width="700px" style="margin:auto"> <tr> <th><input type="checkbox" ng-click="checkAll()" ng-model="chec"></th> <th>ID</th> <th>用户名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> <tr ng-repeat="user in data|filter:{'name':search}|filter:{'sex':sexs}|orderBy:search2+'id'" ng-if="ageTest(user.age,ageSize)"> <td><input type="checkbox" ng-model="user.done" ng-click="counts()"></td> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.password}}</td> <td>{{user.age}}</td> <td>{{user.sex}}</td> <td> <button ng-click="addData()">添加数据</button> <button ng-click="deleteData($index)">删除数据</button> <button ng-click="updateData($index)">修改数据</button> </td> </tr> </table> <div ng-show="add_data_show"> <table border="1px" style="margin:auto;width: 500px;height: 200px"> <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>操作</td> <td><button ng-click="addshow()">提交</button></td> </tr> </table> </div> <div ng-show="update_data_show"> <table border="1px" style="margin:auto;width: 500px;height: 200px"> <tr> <td>姓名</td> <td><input type="text" ng-model="names" disabled></td> </tr> <tr> <td>旧密码</td> <td><input type="text" ng-model="oldpassword"></td> </tr> <tr> <td>新密码</td> <td><input type="text" ng-model="newpassword"></td> </tr> <tr> <td>确认密码</td> <td><input type="text" ng-model="qrpassword"></td> </tr> <tr> <td>操作</td> <td><input type="hidden" ng-model="epwd_index"/><button ng-click="updateshow()">提交</button></td> </tr> </table> </div></div></body></html>
阅读全文
0 0
- angularjs-增删改查+排序
- AngularJs增删改查
- angularjs增删改查
- AngularJs增删改查
- Angularjs的增删改查，排序，查询年龄范围
- AngularJS实现增删改查数据/排序功能
- AngularJS购物车模糊查询,表头排序,增删改查
- angularjs实现增删改查
- Angularjs 增删改查1
- Angularjs增删改查，路由
- angularjs的增删改查
- angularjs的增删改查
- Angularjs增删改查例子
- angularjs增删查,排序,发货
- 表格 增删改查排序
- 商品增删改查排序
- angularjs表格的增删改查
- AngularJs增删改查_路由器
- android listview实现新闻列表展示效果
- xrecyclerview多条目布局
- fragment_a
- 购物车
- 熊猫学猿--（第七竹--常使用的条件语句if）
- angularjs-增删改查+排序
- 详解centos6和centos7防火墙的关闭
- gartner 魔力象限
- fragment_b
- 没有侧滑菜单的一个案例
- vector set map
- 封装单例模式和拦截器的使用
- item01
- 如何在Fragment中获取context
