Home > Article > Web Front-end > AngularJs method of adding, deleting, modifying and checking
AngularJs method of adding, deleting, modifying and checking
- 一个新手Original
- 2017-09-21 10:10:542004browse
<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:'张三',pwd:111,age:20,sex:'男','state':false},
{"id":"2","name":'李四','pwd':'222','age':'21',"sex":'女','state':false},
{"id":3,name:'王五',pwd:333,age:22,sex:'男','state':false}];
var app =angular.module("myApp",['ngRoute']);
// 设置路由
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/user',{controller:'myCtrl',templateUrl:'user.html'})
.when('/updata',{controller:'myCtrl',templateUrl:'updata.html'})
}]);
// 控制器
app.controller('myCtrl',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('是否删除选中项?')){
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('请选择删除项');
}
}
// 表单验证
$(function(){
$('#name').blur(function(){
var name = $('#name').val();
if(name == null || name == ""){
$('#name_info').html(' * 姓名不能为空');
$('#name_info').css('color','red');
}else if(name.length<3 || name.length>4){
$('#name_info').html(' * 姓名长度不能小于三个字符,或者大于四个字符');
$('#name_info').css('color','red');
}else{
$('#name_info').html(' √');
$('#name_info').css('color','green');
}
})
});
});
</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:{'name':serach} | filter:{'age':serachage} | filter:{'sex':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('/updata');upda($index)">修改密码</button></td>
</tr>
</tbody>
</table><br />
<center>
<button ng-click="goToUrl('/user')">添加用户</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>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!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What are the common error codes returned by curl?Next article：What are the common error codes returned by curl?