suchen

Heim  >  Artikel  >  Web-Frontend  >  AngularJs-Methode zum Hinzufügen, Löschen, Ändern und Überprüfen

AngularJs-Methode zum Hinzufügen, Löschen, Ändern und Überprüfen

一个新手
一个新手Original
2017-09-21 10:10:542054Durchsuche

<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>

Das obige ist der detaillierte Inhalt vonAngularJs-Methode zum Hinzufügen, Löschen, Ändern und Überprüfen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was sind die häufigsten Fehlercodes, die von Curl zurückgegeben werden?Nächster Artikel：Was sind die häufigsten Fehlercodes, die von Curl zurückgegeben werden?

In Verbindung stehende Artikel

Mehr sehen