angularJs 表格添加刪除修改查詢方法
更新時間：2018年02月27日 14:41:39 作者：余生I
下面小編就為大家分享一篇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 表格添加刪除修改查詢方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
本文主要介紹了RequireJs的使用。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
AngularJS自帶了很多驗證，什么必填，最大長度，最小長度...，這里記錄幾個有用的正則式驗證。本文給大家介紹的非常詳細，對angularjs中表單驗證知識感興趣的朋友一起學習吧2016-11-11
這篇文章主要介紹了AngularJS路由刪除#符號解決的辦法的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
Angular 中使用 FineReport不顯示報表直接打印預覽
這篇文章主要介紹了Angular 中使用 FineReport不顯示報表直接打印預覽,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
使用Angular 6創(chuàng)建各種動畫效果的方法
Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動畫。我們將通過本文學習到如何使用Angular 6來創(chuàng)建各種動畫效果。在此，我們將使用Visual Studio Code來進行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10
相信大家都知道AngularJS是一個前端框架，實現(xiàn)了可交互式的頁面，但是對于一個web應用，頁面上進行展示的數(shù)據(jù)從哪里來，肯定需要服務端進行支持，那么AngularJS是如何同服務端進行交互的呢？通過這篇文章大家一起來看看吧。2016-09-09
Angular利用內容投射向組件輸入ngForOf模板的方法
本篇文章主要介紹了Angular利用內容投射向組件輸入ngForOf模板的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
今天小編就為大家分享一篇angular4強制刷新視圖的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular.js項目中使用gulp實現(xiàn)自動化構建以及壓縮打包詳解
基于流的前端自動化構建工具，利用gulp可以提高前端開發(fā)效率，特別是在前后端分離的項目中。下面這篇文章主要給大家介紹了關于在Angular.js項目中使用gulp實現(xiàn)自動化構建以及壓縮打包的相關資料，需要的朋友可以參考下。2017-07-07
Angularjs的ng-repeat中去除重復數(shù)據(jù)的方法
這篇文章主要介紹了Angularjs的ng-repeat中去除重復數(shù)據(jù)的方法,涉及AngularJS針對重復數(shù)據(jù)的遍歷與過濾技巧,需要的朋友可以參考下2016-08-08