AngularJS页面的增删改查

来源：互联网发布：半包包括哪些知乎编辑：程序博客网时间：2024/06/06 00:12

var app = angular.module("myApp",['ngRoute']);

//路由初始化配置

app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/addUser",{
controller:"addCtrl",
templateUrl:"addUser.html"
})
.when("/updatePwd/:name",{
controller:"updateCtrl",
templateUrl:"updatePwd.html"
})
.otherwise({redirectTo:"/addUser"});
}]);

app.controller("myCtrl",function($scope,$location){

//数据源

$scope.users = [{
id:1,
name:"张三",
pwd:123,
age:22,
sex:"男",
state:false
},{
id:2,
name:"李四",
pwd:456,
age:33,
sex:"女",
state:false
},{
id:3,
name:"王五",
pwd:789,
age:44,
sex:"男",
state:false
}];

$scope.goToPath = function(path){
alert(path);
$location.path(path);
}

//年龄选择功能
$scope.size = "--请选择--";
$scope.ageSize = function(age,size){
if(size == "--请选择--"){
return true;
}else{
var arr = size.split("-");
var ageMin = arr[0];
var ageMax = arr[1];
if(age>ageMin && age<ageMax){
return true;
}else{
return false;
}
}
}

//全选
$scope.selectAll = false;
$scope.selectAllCheck = function(){
if($scope.selectAll){
for(index in $scope.users){
$scope.users[index].state = true;
}
}else{
for(index in $scope.users){
$scope.users[index].state = false;
}
}
}

//反选功能
$scope.checkSelect = function(index){
var ck = false;
for(index in $scope.users){
if($scope.users[index].state == true){

}else{
ck = true;
}
}
if(ck){
$scope.selectAll = false;
}else{
$scope.selectAll = true;
}
}

//批量删除个功能
$scope.deleteSel = function(){
var arr = [];
for(index in $scope.users){
if($scope.users[index].state){
arr.push($scope.users[index].name);
}
}

if(arr.length>0){
for(i in arr){
for(i2 in $scope.users){
if(arr[i] == $scope.users[i2].name){
$scope.users.splice(i2,1);
}
}
}
}else{
alert("请选择");
}
}

//全部删除功能
$scope.deleteAll = function(){
$scope.users = null;
}

});
//添加控制器
app.controller("addCtrl",function($scope){
$scope.name = "";
$scope.pwd = "";
$scope.age = "";
$scope.sex = "";
$scope.sub = function(){
$scope.idMax = 0;
for(index in $scope.users){
if($scope.users[index].id > $scope.idMax){
$scope.idMax = $scope.users[index].id;
}
}
var user = {
id:$scope.idMax+1,
name:$scope.name,
pwd:$scope.pwd,
age:$scope.age,
sex:$scope.sex
};
$scope.users.push(user);
}
});
//修改控制器
app.controller("updateCtrl",function($scope,$routeParams){
var name = $routeParams.name;
$scope.name = name;
$scope.pwd1 = "";
$scope.updatePwd = function(){
for(index in $scope.users){
if($scope.users[index].name == name){
$scope.users[index].pwd = $scope.pwd1;
}
}
}
});

</script>

//主页面信息
<h2>用户信息表</h2>
<input type="text" placeholder="用户名查询" size="9" ng-model="search"/>
年龄:<select ng-model="size">
<option>--请选择--</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
<option>41-50</option>
</select>
性别:<select ng-model="len">
<option>--请选择--</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="deleteAll()">全部删除</button>
<button ng-click="deleteSel()">批量删除</button><br /><br />
<table border="1 solid" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllCheck()" ></th>
<th>id</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter:{name:search}" ng-if="ageSize(user.age,size)" ng-if="sexLen(user.sex,len)">
<td><input type="checkbox" ng-click="checkSelect($index)" ng-model="user.state"></td>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.pwd}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
<td><button ng-click="goToPath('/updatePwd/'+user.name)">修改密码</button> </td>
</tr>
</tbody>
</table> <br />
//添加页面信息
<button class="addUser" ng-click="goToPath('/addUser')">添加用户</button><br /><br />
<script type="text/ng-template" id="addUser.html">
<form action="">
<table border="1" cellspacing="1" cellpadding="10">
<tr>
<th>用户名：</th>
<td><input ng-model="name" placeholder="请输入用户名" /></td>
</tr>
<tr>
<th>密　码：</th>
<td><input ng-model="pwd" placeholder="请输入密码" /></td>
</tr><tr>
<th>年　龄：</th>
<td><input ng-model="age" placeholder="请输入年龄" /></td>
</tr><tr>
<th>性　别：</th>
<td><input ng-model="sex" placeholder="请输入性别" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>
</tr>
</table>
</form>
</script>
//修改页面信息
<script type="text/ng-template" id="updatePwd.html">
<form>
<table border="1" cellspacing="1" cellpadding="10">
<tr>
<th>用户名：</th>
<td><input disabled="disabled" ng-model="name" placeholder="请输入用户名" /></td>
</tr>
<tr>
<th>旧密码：</th>
<td><input ng-model="oldPwd" placeholder="请输入密码" /></td>
</tr><tr>
<th>新密码：</th>
<td><input ng-model="pwd1" placeholder="请输入年龄" /></td>
</tr><tr>
<th>确　认：</th>
<td><input ng-model="pwd2" placeholder="请输入性别" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" value="提交" ng-click="updatePwd()" /></td>
</tr>
</table>
</form>
</script>
<div ng-view>

</div>
</center>
</body>

阅读全文

0 0