溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關angularJs中表格如何實現添加刪除修改查詢方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="agl/angular.min.js"></script>
<script>
var app=angular.module("mpp",[]);
app.controller("ctrl",function ($scope) {
$scope.arr=[];
$scope.add=function () {
$scope.arr.push({name:$scope.name,password:$scope.password,age:$scope.age,sex:$scope.sex})
}
$scope.submit=function () {
for (var i=0;i<$scope.arr.length;i++)
{
if($scope.arr[i].name==$scope.name2)
{
if($scope.arr[i].password==$scope.pass)
{
if($scope.pass2==$scope.pass){
$scope.arr[i].password=$scope.pass2;
}else{
alert("兩次輸入不一致");
}
}else {
alert("密碼錯誤");
}
}else {
alert("用戶名錯誤");
}
}
}
$scope.flag=false;
$scope.show=function () {
$scope.flag=true;
}
})
</script>
<link rel="stylesheet" href="css/style.css" rel="external nofollow" >
</head>
<body ng-app="mpp" ng-controller="ctrl">
<div class="inner">
<input type="text" placeholder="用戶名查詢" ng-model="user">
<input type="text" placeholder="年齡范圍查詢" ng-model="ages">
<select ng-model="sexs">
<option value="男">男</option>
<option value="女">女</option></select>
<button>全部刪除</button>
<TABLE>
<tr>
<th>Id</th>
<th>用戶名</th>
<th>密碼</th>
<th>年齡</th>
<th>性別</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in arr|filter:{name:user}|filter:{age:ages}|filter:{sex:sexs}">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.password}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button ng-click="show()">修改密碼</button></td>
</tr>
</TABLE>
<button ng-click="add()">添加用戶</button>
<div class="conner">
<div class="add">
用戶名：<input type="text" ng-model="name"><br>
密 碼：<input type="password" ng-model="password"><br>
年 齡：<input type="text" ng-model="age"><br>
性 別：<select ng-model="sex">
<option value="男">男</option>
<option value="女">女</option></select><br>
</div>
<div class="update" ng-show="flag">
用戶名：<input type="text" ng-model="name2"><br>
舊密碼：<input type="text" ng-model="pass"><br>
新密碼：<input type="password" ng-model="pass2"><br>
確認密碼：<input type="password" ng-model="pass3"><br>
</div>
</div>
<button ng-click="submit()">提交</button>
</div>
</body>
</html>css
*{
margin: 0;
padding: 0;
}
.inner{
margin: 20px auto;
text-align: center;
}
table{
margin: 10px auto;
text-align: center;
}
tr{
border-collapse: collapse;
}
tr th,td{
border:1px solid #000000;
width: 60px;
}
.conner{
width: 600px;
height: 300px;
background: #ffe7e0;
margin: 0 auto;
}
.add{
margin: 10px auto;
padding-top: 20px;
width: 260px;
height: 120px;
border: 2px solid #e42112;
}
.update{
width: 280px;
height: 120px;
border: 2px solid #e42112;
text-align: center;
margin: 10px auto;
padding-top: 20px;
}感謝各位的閱讀！關于“angularJs中表格如何實現添加刪除修改查詢方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
