<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现数组随机排序</title>
<style>
#mydiv{
width: 550px; height:200px; background-color: #fff;
}
a{text-decoration: none;}
</style>
<script type="text/javascript" src="js/angular-1.5.5/angular.js"></script>
<script src="js/angular-1.5.5/angular-route.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", ["ngRoute"]);
app.config(["$routeProvider",function($routeProvider){
//alert("ssss");
$routeProvider
.when("/add",{
controller : "myadd",
templateUrl:"adduser.html"})
.when("/updata/:name",{
controller : "myupdata",
templateUrl:"updatauser.html"})
.otherwise({redirectTo:"/add"});
}]);
//修改控制器
app.controller("myupdata", function($scope,$routeParams) {
$scope.name = $routeParams.name;
//alert($scope.name);
$scope.oldpwd = "";
$scope.newpwd = "";
$scope.connewowd = "";
$scope.but = function(){
for(index in $scope.users){
if($scope.users[index].name == $scope.name){
$scope.users[index].pwd = $scope.newpwd ;
}
}
$scope.name ="";
$scope.oldpwd = "";
$scope.newpwd = "";
$scope.connewowd = "";
}
});
//添加控制器
app.controller("myadd", function($scope) {
$scope.name = "";
$scope.pwd = "";
$scope.age = "";
$scope.sex = "";
$scope.but = function(){
//alert("sd");
var newUser = {
id:$scope.users.length + 1,
name:$scope.name,
pwd:$scope.pwd,
age:$scope.age,
sex:$scope.sex
}
//添加新用户.
$scope.users.push(newUser);
$scope.name = "";
$scope.pwd = "";
$scope.age = "";
$scope.sex = "";
}
});
//主控制器
app.controller("myCtrl", function($scope) {
$scope.users = [
{id:1,name:"a",pwd:"111",age:12,sex:"男",state:false},
{id:2,name:"b",pwd:"222",age:23,sex:"男",state:false},
{id:3,name:"c",pwd:"333",age:34,sex:"女",state:false},
{id:4,name:"d",pwd:"444",age:45,sex:"女",state:false},
{id:5,name:"e",pwd:"555",age:56,sex:"女",state:false}
];
$scope.title = 'name';
$scope.desc = 0;
$scope.key = '';
$scope.ageSize = "";
$scope.setSex = "";
$scope.myorderBy = function(name){
$scope.title = name;
$scope.desc = !$scope.desc;
};
//删除
$scope.deleteall = function(){
//alert("sss");
$scope.users.splice($scope.users);
};
$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.deleteSel = function(){
var userNames = [];
//遍历users数组，获取状态是选中的user对象的名字
for(index in $scope.users){
if($scope.users[index].state == true){
userNames.push($scope.users[index].name);
}
}
if(userNames.length>0){
if(confirm("是否删除选中项？")){
for(i in userNames){
var name = userNames[i];
for(i2 in $scope.users){
if($scope.users[i2].name == name){
$scope.users.splice(i2,1);
}
}
}
}
}else{
alert("请选择删除项");
}
}
//全选 反选
$scope.selectAll = false;
$scope.all = function(m) {
for(var i = 0; i < $scope.users.length; i++) {
if(m === true) {
$scope.users[i].state = true;
} else {
$scope.users[i].state = false;
}
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<form>
<table border="1" style="text-align: center;" width="600">
<tr>
<th colspan="3">
<input type="text" ng-model="key" placeholder="请输入姓名关键字" />
</th>
<th>
<select ng-model="ageSize" ng-init="ageSize ='--年龄范围查询--'">
<option>--年龄范围查询--</option>
<option>10~20</option>
<option>21~30</option>
<option>31~100</option>
</select>
</th>
<th>
<select ng-model="setSex" >
<option value="">--性别--</option>
<option >男</option>
<option >女</option>
</select>
</th>
<th>
<input type="button" value="全部删除" ng-click="deleteall()" />
<input ng-click="deleteSel()" type="button" value="批量删除" />
</th>
</tr>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)"/></th>
<th ng-click="myorderBy('id')" >id</th>
<th ng-click="myorderBy('name')" >用户名</th>
<th ng-click="myorderBy('pwd')" >密码</th>
<th ng-click="myorderBy('age')" >年龄</th>
<th ng-click="myorderBy('sex)" >性别</th>
<th >操作</th>
</tr>
<!-- ng-if="ageTest(u.age,ageSize)" -->
<tr ng-repeat="u in users | filter:setSex |filter: {name: key} | orderBy: title : desc" ng-if="ageTest(u.age,ageSize)">
<td><input ng-model="u.state" type="checkbox" ng-checked="selectAll" /></td>
<td>{{u.id}}</td>
<td>{{u.name}}</td>
<td>{{u.pwd}}</td>
<td>{{u.age}}</td>
<td>{{u.sex}}</td>
<td>
<a href="#/updata/{{u.name}}" ><input type="button" value="修改密码" /></a>
</td>
</tr>
</table>
<a href="#/add"><input type="button" value="添加用户" style="margin-right: 480px;"/></a>
<div id="mydiv" ng-view >
</div>
</form>
</center>
<!--
作者：2337620283@qq.com
时间：2017-09-19
描述： 添加 用户
-->
<script type="text/ng-template" id="adduser.html">
<div>
<form>
姓名 : <input type="text" name="name" id="name" ng-model="name" /> <br /><br />
密码 : <input type="text" id="pwd" ng-model="pwd" /> <br /><br />
年龄 : <input type="number" id="age" ng-model="age" />
<br /><br />
性别:<input type="radio" value="女" name="sex" ng-model="sex" /> 女
<input type="radio" value="男" name="sex" ng-model="sex" /> 男
<br /><br />
<input type="button" value="提交" ng-click="but()" />
</form>
</div>
</script>
<!--
作者：2337620283@qq.com
时间：2017-09-19
描述： 修改 用户
-->
<script type="text/ng-template" id="updatauser.html">
<div>
<form>
用户名 : <input type="text" id="name" ng-model="name"/><br /><br />
旧密码 : <input type="text" id="oldpwd" ng-model="oldpwd" /><br /><br />
新密码 : <input type="text" id="newpwd" ng-model="newpwd" /><br /><br />
确认密码:<input type="text" id="connewowd" ng-model="connewowd" /><br /><br />
<input type="button" value="提交" ng-click="but()" />
</form>
</div>
</script>
</body>
</html>
07-23
08-18
268
268
01-11
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
