Angular實現(xiàn)較為復(fù)雜的表格過濾，刪除功能示例
更新時間：2017年12月23日 09:19:29 作者：qq_41073714
這篇文章主要介紹了Angular實現(xiàn)較為復(fù)雜的表格過濾，刪除功能,結(jié)合實例形式分析了AngularJS針對表格的排序、查詢匹配、頁面元素屬性動態(tài)修改等相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了Angular實現(xiàn)較為復(fù)雜的表格過濾，刪除功能。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>m.fzitv.net Angular過濾、刪除</title>
<style>
table{
border: 1px solid black;
width: 800px;
}
td , th{
border: 1px solid black;
text-align: center;
}
th{
background: #767674;
}
.d1{
width: 50%;
margin: 0 auto;
}
.d2{
margin-top: 10px;
}
.btn{
background: green;
color: white;
}
.btn1{
background: red;
color: white;
}
tr:nth-child(2n){
background-color: gainsboro;
}
</style>
<script src="angular.min.js"></script>
<script type="text/javascript" src="jquery-1.9.1.min.js" ></script>
<script>
angular.module("MyApp",[])
.controller("democ",function($scope,$filter){
$scope.isc = false;
$scope.arrs = [{
checked:false,
id:7,
name:"OPPO R9s",
user:"趙云",
tel:15777777777,
price:4999,
city:"北京",
time:new Date('03-09 10:00'),
sta:"已發(fā)貨"
},
{
checked:false,
id:12,
name:"VIVO X20",
user:"關(guān)羽",
tel:15333333333,
price:2998,
city:"上海",
time:new Date('08-22 10:00'),
sta:"已發(fā)貨"
},
{
checked:false,
id:1,
name:"iPhone 8 Plus",
user:"曹操",
tel:15111111111,
price:7588,
city:"北京",
time:new Date('09-04 10:00'),
sta:"已發(fā)貨"
},
{
checked:false,
id:11,
name:"小*Note5",
user:"黃忠",
tel:13222222222,
price:699,
city:"重慶",
time:new Date('02-28 10:00'),
sta:"發(fā)貨"
},
{
checked:false,
id:1,
name:"小*Mix2",
user:"黃蓋",
tel:13111111111,
price:3299,
city:"北京",
time:new Date('03-015 10:00'),
sta:"發(fā)貨"
}];
$scope.arr = $scope.arrs;
$scope.seluser = function(){
$scope.arr = [];
var val = $scope.reg_user;
var f = $filter("filter");
$scope.arr = f($scope.arrs,{"user":val});
}
$scope.seltel = function(){
$scope.arr = [];
var val = $scope.reg_tel;
var f = $filter("filter");
$scope.arr = f($scope.arrs,{"tel":val});
}
$scope.selsta = function(){
$scope.arr = [];
var val = $scope.reg_sta;
var f = $filter("filter");
$scope.arr = f($scope.arrs,{"sta":val});
}
$scope.ckAll = function(){
var ck = $scope.sta_ck;
for(var i=0; i<$scope.arrs.length; i++){
$scope.arrs[i].checked = ck;
}
}
$scope.del = function(th){
$scope.arrs.splice(th,1);
}
$scope.delAll = function(){
for(var i=0; i<$scope.arrs.length; i++){
if($scope.arrs[i].checked==true){
$scope.arrs.splice(i,1);
i--;
}
}
}
$scope.add = function(){
var d=new Date();
$scope.arrs.push({
checked:false,
id:$scope.a_id,
name:$scope.a_name,
user:$scope.a_user,
tel:$scope.a_tel,
price:$scope.a_price,
city:$scope.a_city,
time:d,
sta:"發(fā)貨"
});
$scope.arr = $scope.arrs;
$scope.isc = false;
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="democ">
<div class="d1">
<div>
<input type="text" placeholder="用戶名搜索" ng-change="seluser()" ng-model="reg_user"/>
<input type="text" placeholder="手機號搜索" ng-change="seltel()" ng-model="reg_tel"/>
<select>
<option>選擇城市</option>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
</select>
<select ng-change="selsta()" ng-model="reg_sta">
<option value="">選擇狀態(tài)</option>
<option value="發(fā)貨">發(fā)貨</option>
<option value="已發(fā)貨">已發(fā)貨</option>
</select>
<select ng-model="selid">
<option value="">--請選擇--</option>
<option value="id">ID正序</option>
<option value="-id">ID倒敘</option>
</select>
<select ng-model="selmonth">
<option value="">開始月份</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select ng-model="lastmonth">
<option value="">結(jié)束月份</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="d2">
<input type="button" value="新增訂單" class="btn" ng-click="isc=true"/>
<input type="button" value="批量發(fā)貨" class="btn"/>
<input type="button" value="批量刪除" class="btn1" ng-click="delAll()"/>
敏感詞:米(商品名)->替換成*
</div>
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<th><input type="checkbox" ng-change="ckAll()" ng-model="sta_ck"/></th>
<th>ID</th>
<th>商品名</th>
<th>用戶名</th>
<th>手機號</th>
<th>價格</th>
<th>城市</th>
<th>下單時間</th>
<th>狀態(tài)</th>
<th>操作</th>
</tr>
<tr ng-repeat="a in arr|orderBy : selid | filter:{time:selmonth} | filter:{time:lastmonth}">
<td><input type="checkbox" ng-model="a.checked"/></td>
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td>{{a.user}}</td>
<td>{{a.tel}}</td>
<td>{{a.price|currency : '￥'}}</td>
<td>{{a.city}}</td>
<td>{{a.time|date : 'MM-HH hh:dd:ss'}}</td>
<td>
<span ng-show="a.sta=='已發(fā)貨'">{{a.sta}}</span>
<span ng-show="a.sta=='發(fā)貨'"><a href="#" rel="external nofollow" ng-click="a.sta='已發(fā)貨'">{{a.sta}}</a></span>
</td>
<td><input type="button" value="刪除" ng-click="del(this)"/></td>
</tr>
</table>
</div>
<div ng-show="isc">
I D:<input type="text" ng-model="a_id"/><br />
商品名:<input type="text" ng-model="a_name"/><br />
用戶名:<input type="text" ng-model="a_user"/><br />
手機號:<input type="text" ng-model="a_tel"/><br />
價 值:<input type="text" ng-model="a_price"/><br />
城 市:<input type="text" ng-model="a_city"/><br />
<input type="button" value="保存" ng-click="add()"/>
</div>
</div>
</body>
</html>
PS：代碼中尚有一些功能并不完善，感興趣的朋友可以自行測試修改完善一下。
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
您可能感興趣的文章:
- 基于AngularJS的拖拽文件上傳的實例代碼
- 使用angular幫你實現(xiàn)拖拽的示例
- angular-ui-sortable實現(xiàn)可拖拽排序列表
- AngularJS實現(xiàn)的錨點樓層跳轉(zhuǎn)功能示例
- Angular實現(xiàn)的敏感文字自動過濾與提示功能示例
- Angular實現(xiàn)點擊按鈕控制隱藏和顯示功能示例
- Angular實現(xiàn)的簡單定時器功能示例
- Angular實現(xiàn)的日程表功能【可添加及隱藏顯示內(nèi)容】
- AngularJS實現(xiàn)的根據(jù)數(shù)量與單價計算總價功能示例
- AngularJS實現(xiàn)的簡單拖拽功能示例
相關(guān)文章
Angular2學(xué)習(xí)教程之ng中變更檢測問題詳解
這篇文章主要給大家介紹了Angular2學(xué)習(xí)教程之ng中變更檢測問題的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
詳解angularjs 學(xué)習(xí)之 scope作用域
本篇文章主要介紹了詳解angularjs 學(xué)習(xí)之 scope作用域，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
下面小編就為大家分享一篇AngularJs 最新驗證手機號碼的實例,成功測試通過，具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
Angular2中select用法之設(shè)置默認(rèn)值與事件詳解
在Angular.JS中可以使用數(shù)組或?qū)ο髣?chuàng)建一個下拉列表選項。關(guān)于Angular.js中select的基礎(chǔ)相信大家應(yīng)該都已經(jīng)了解了，那么下面這篇文章主要給大家介紹了Angular2中select用法之設(shè)置默認(rèn)值與事件的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
angularJS利用ng-repeat遍歷二維數(shù)組的實例代碼
本篇文章主要介紹了angularJS利用ng-repeat遍歷二維數(shù)組的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
AngularJs根據(jù)訪問的頁面動態(tài)加載Controller的解決方案
這篇文章主要介紹了AngularJs根據(jù)訪問的頁面動態(tài)加載Controller的解決方案,需要的朋友可以參考下2015-02-02
本篇文章主要介紹了Angular 4 指令快速入門教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家詳細(xì)介紹了Angular實現(xiàn)表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
AngularJS ngModel實現(xiàn)指令與輸入直接的數(shù)據(jù)通信
這篇文章主要介紹了AngularJS ngModel實現(xiàn)指令與輸入直接的數(shù)據(jù)通信的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了angular2+nodejs實現(xiàn)圖片上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03