AngularJs method of adding, deleting, modifying and checking-JS Tutorial-php.cn

AngularJs method of adding, deleting, modifying and checking
一个新手
Release： 2017-09-21 10:10:54
Original
2098 people have browsed it
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>
<script>
// 初始化数组
var users = [{"id":1,name:&#39;张三&#39;,pwd:111,age:20,sex:&#39;男&#39;,&#39;state&#39;:false},
{"id":"2","name":&#39;李四&#39;,&#39;pwd&#39;:&#39;222&#39;,&#39;age&#39;:&#39;21&#39;,"sex":&#39;女&#39;,&#39;state&#39;:false},
{"id":3,name:&#39;王五&#39;,pwd:333,age:22,sex:&#39;男&#39;,&#39;state&#39;:false}];
var app =angular.module("myApp",[&#39;ngRoute&#39;]);
// 设置路由
app.config([&#39;$routeProvider&#39;,function($routeProvider){
$routeProvider
.when(&#39;/user&#39;,{controller:&#39;myCtrl&#39;,templateUrl:&#39;user.html&#39;})
.when(&#39;/updata&#39;,{controller:&#39;myCtrl&#39;,templateUrl:&#39;updata.html&#39;})
}]);
// 控制器
app.controller(&#39;myCtrl&#39;,function($scope,$location){
$scope.users = users;
$scope.goToUrl = function(path){
$location.path(path);
}
// 添加用户表
$scope.sub = function(){
var newUser = {
id:$scope.users.length +1,
name:$scope.name,
pwd:$scope.pwd,
pwd2:$scope.pwd2,
age:$scope.age,
sex:$scope.sex}
$scope.users.push(newUser);
}
// 更改用户表点击的方法 并把值回写到修改的表单中
$scope.upda = function($index){
$scope.name = $scope.users[$index].name;
$scope.old = $scope.users[$index].pwd;
$scope.age = $scope.users[$index].age;
$scope.sex = $scope.users[$index].sex;
o = $index;
}
// 更改表单中的内容
$scope.up = function(){
$scope.users[o].name = $scope.name;
$scope.users[o].pwd =$scope.pwd;
$scope.users[o].age = $scope.age;
$scope.users[o].sex = $scope.sex;
}
// 删除全部
$scope.removeAll = function(){
$scope.users = [];
}
// 批量删除
$scope.remove = function(){
var usersName =[];
// 遍历users数组，获取状态是选中的user对象的名字
for (index in $scope.users) {
if($scope.users[index].state == true){
usersName.push($scope.users[index].name);
}
}
if(usersName.length>0){
if(confirm(&#39;是否删除选中项?&#39;)){
for (i in usersName){
var name = usersName[i];
for (ii in $scope.users){
if($scope.users[ii].name == name){
$scope.users.splice(ii,1);
}
}
}
}
}else{
alert(&#39;请选择删除项&#39;);
}
}
// 表单验证
$(function(){
$(&#39;#name&#39;).blur(function(){
var name = $(&#39;#name&#39;).val();
if(name == null || name == ""){
$(&#39;#name_info&#39;).html(&#39; * 姓名不能为空&#39;);
$(&#39;#name_info&#39;).css(&#39;color&#39;,&#39;red&#39;);
}else if(name.length<3 || name.length>4){
$(&#39;#name_info&#39;).html(&#39; * 姓名长度不能小于三个字符,或者大于四个字符&#39;);
$(&#39;#name_info&#39;).css(&#39;color&#39;,&#39;red&#39;);
}else{
$(&#39;#name_info&#39;).html(&#39; √&#39;);
$(&#39;#name_info&#39;).css(&#39;color&#39;,&#39;green&#39;);
}
})
});
});
</script>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="text" placeholder="姓名查询" ng-model="serach"/>
<input type="text" placeholder="年龄查询" ng-model="serachage"/>
<select ng-model="serasex">
<option>--请选择--</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="removeAll()">全部删除</button>
<button ng-click="remove()">批量删除</button>
</center>
<!--表单-->
<table align="center" border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox"/></th>
<th>id</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<!--获取数组里的数据，循环遍历到表单中-->
<tbody>
<tr ng-repeat="user in users | filter:{&#39;name&#39;:serach} | filter:{&#39;age&#39;:serachage} | filter:{&#39;sex&#39;:serasex}">
<td><input type="checkbox" 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="goToUrl(&#39;/updata&#39;);upda($index)">修改密码</button></td>
</tr>
</tbody>
</table><br />
<center>
<button ng-click="goToUrl(&#39;/user&#39;)">添加用户</button>
</center>
<!--添加新用户表单-->
<script type="text/ng-template" id="user.html">
<table align="center" border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>姓 名:<input type="text" ng-model="name" id="name"/>
<span id="name_info"></span></th>
</tr>
<tr>
<th>密 码:<input type="text" ng-model="pwd"/></th>
</tr>
<tr>
<th>确认密码:<input type="text" ng-model="pwd2"/></th>
</tr>
<tr>
<th>年 龄:<input type="text" ng-model="age"/></th>
</tr>
<tr>
<th>性 别:<input type="text" ng-model="sex"/></th>
</tr>
<tr>
<th><input type="submit" value="提交" ng-click="sub()"/></th>
</tr>
</thead>
</table>
</script>
<!--修改用户表单-->
<script type="text/ng-template" id="updata.html">
<table align="center" border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>姓 名:<input type="text" ng-model="name"/></th>
</tr>
<tr>
<th>旧密码:<input type="text" ng-model="old"/></th>
</tr>
<tr>
<th>新密码:<input type="text" ng-model="pwd"/></th>
</tr>
<tr>
<th>确认密码:<input type="text" ng-model="pwd2"/></th>
</tr>
<tr>
<th>年 龄:<input type="text" ng-model="age"/></th>
</tr>
<tr>
<th>性 别:<input type="text" ng-model="sex"/></th>
</tr>
<tr>
<th><input type="submit" value="提交" ng-click="up()"/></th>
</tr>
</thead>
</table>
</script>
<!--用于渲染页面-->
<p ng-view></p>
</body>
Copy after login
The above is the detailed content of AngularJs method of adding, deleting, modifying and checking. For more information, please follow other related articles on the PHP Chinese website!