angular 增刪改查與驗(yàn)證
發(fā)表時(shí)間：2023-09-10 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]本片文章主要介紹angular的增刪改查以及驗(yàn)證，感興趣的朋友參考下。代碼如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>增刪改查&...
本片文章主要介紹angular的增刪改查以及驗(yàn)證，感興趣的朋友參考下。
代碼如下：
<!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="">選擇級(jí)別</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">級(jí)別</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"/> 級(jí)別:<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>級(jí)別</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>相關(guān)推薦：
Angular如何進(jìn)行服務(wù)端渲染開發(fā)
Angular4中router使用技巧
angular4共享多個(gè)組件數(shù)據(jù)通信案例詳解
以上就是angular 增刪改查和驗(yàn)證 的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
