溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下angular如何實現增刪改查和驗證 ，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>增刪改查</title>
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("anan", []);
app.controller("enen", function($scope) {
$scope.user = [{
ck:false,
id: 1,
name: '李1',
pwd: 123456,
level: 3
}, {
ck:false,
id: 2,
name: '李2',
pwd: 123456,
level: 1
}, {
ck:false,
id: 3,
name: '李3',
pwd: 123456,
level: 3
}, {
ck:false,
id: 4,
name: '李4',
pwd: 123456,
level: 1
}, {
ck:false,
id: 5,
name: '李5',
pwd: 123456,
level: 2
}, {ck:false,
id: 6,
name: '李6',
pwd: 123456,
level: 3
}, {
ck:false,
id: 7,
name: '李7',
pwd: 123456,
level: 2
}, {
ck:false,
id: 8,
name: '李8',
pwd: 123456,
level: 1
}, {
ck:false,
id: 9,
name: '李9',
pwd: 123456,
level: 2
}, {
ck:false,
id: 10,
name: '李10',
pwd: 123456,
level: 1
}];
$scope.ckAll=function(){
for(var i=0;i<$scope.user.length;i++){
$scope.user[i].ck=$scope.flag;
}
}
$scope.delso=function(){
var shu=0;
for(var i=0;i<$scope.user.length;i++){
if($scope.user[i].ck){
$scope.user.splice(i,1);
shu++;
i--;
}
}
}
$scope.insert=function(m){
var good={ck:false,id:$scope.tid,name:$scope.tname,pwd:$scope.tpwd,level:$scope.tlevel};
$scope.user.push(good);
}
})
</script>
<style type="text/css">
#cll:nth-child(even){
background-color: lightseagreen;
}
#cll:nth-child(odd){
background-color:#C9C994;
}
</style>
</head>
<body ng-app="anan" ng-controller="enen">
<div style="margin: 0 auto; height:800px; width: 1000px; border: 1px solid greenyellow; ">
<input placeholder="用戶名搜索" ng-model="souname"/>
<select ng-model="jb"><option value="">選擇級別</option ><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
排序<select ng-model="px"><option>排序</option> <option value="id">id</option><option value="level">級別</option></select><br/>
<button style=" background-color: #008000; margin: 6px; color: #FFFFFF;" ng-click="m=true">新增用戶</button><button style="color: #FFFFFF; background-color: crimson;margin: 6px;" ng-click="delso()">批量刪除</button>
<div style="width: 1000px;border: 1px solid greenyellow;" ng-show="m">
id:<input type="number" ng-model="tid"/> 用戶名:<input ng-model="tname"/> 密碼:<input ng-model="tpwd"/> 級別:<input type="number" ng-model="tlevel"/> <button ng-click="insert(m=false)">添加</button>
</div>
<table style="width: 1000px;" border="1px">
<tr style="background-color: cadetblue;">
<td><input type="checkbox" ng-click="ckAll()" ng-model="flag"/></td>
<td>id</td>
<td>用戶名</td>
<td>密碼</td>
<td>級別</td>
<td>操作</td>
</tr>
<tr id="cll" ng-repeat="e in user|orderBy:px:false|filter:{name:souname}|filter:{level:jb}">
<td><input type="checkbox" ng-model="e.ck"/></td>
<td>{{e.id}}</td>
<td>{{e.name}}</td>
<td><span> {{e.pwd}}</span>
<span ng-show="f">
<input ng-model="e.pwd" /> <button ng-click="f=false">保存</button>
</span></td>
<td>{{e.level}}</td>
<td><button ng-click="f=true">修改密碼</button></td>
</tr>
</table>
</div>
</body>
</html>以上是“angular如何實現增刪改查和驗證 ”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
