AngularJS使用ng-repeat和ng-if實現(xiàn)數(shù)據(jù)的刪選顯示效果示例【適用于表單數(shù)據(jù)的顯示】
本文實例講述了AngularJS使用ng-repeat和ng-if實現(xiàn)數(shù)據(jù)的刪選顯示效果。分享給大家供大家參考,具體如下:
1.首先重復回顧一下ng-repeat指令
ng-repeat可以實現(xiàn)內(nèi)容的重復顯示,比如我們可以寫如下代碼
<script>
angular.module("myapp",[]).controller("mycontroller",function($scope){
$scope.data=[{name:"yu1",age:10,partment:"產(chǎn)品部"},
{name:"yu2",age:11,partment:"產(chǎn)品部"},
{name:"yu3",age:12,partment:"事業(yè)部"},
{name:"yu4",age:13,partment:"事業(yè)部"},
{name:"yu5",age:14,partment:"物資部"},
{name:"yu6",age:15,partment:"物資部"}
]
})
</script>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<th>姓名</th>
<th>年齡</th>
<th>部門</th>
</thead>
<tbody>
<tr ng-repeat="member in data">
<td>{{member.name}}</td>
<td>{{member.age}}</td>
<td>{{member.partment}}</td>
</tr>
</tbody>
</table>
</div>
顯示效果如下:

2.此時的問題是,如果我們要刪選的是部門為“產(chǎn)品部”的員工
那么可以使用ng-repeat+ng-if的方法,這樣可以實現(xiàn)簡單的前端刪選
我們只需要在ng-repeat后面簡單的加上ng-if="member.partment=='產(chǎn)品部即可'"
代碼修改如下:
<tr ng-repeat="member in data" ng-if="member.partment=='產(chǎn)品部'">
效果為:

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
相關(guān)文章
AngularJS service之select下拉菜單效果
這篇文章主要為大家詳細介紹了AngularJS service之select下拉菜單效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07
Angular.js實現(xiàn)獲取驗證碼倒計時60秒按鈕的簡單方法
最近做項目的時候又遇到了驗證碼倒計時的需求,發(fā)現(xiàn)這個功能還是挺實用的,所以就想著總結(jié)一下,下面這篇文章主要給大家介紹了關(guān)于利用Angular.js如何實現(xiàn)獲取驗證碼倒計時按鈕的簡單方法,需要的朋友可以參考借鑒,下面來一起看看吧。2017-10-10
Angular實現(xiàn)防抖和節(jié)流的示例代碼
這篇博客主要是詳細介紹兩種常用Angular實現(xiàn)防抖和節(jié)流的方法:使用RxJS操作符和使用Angular自帶的工具,文中通過代碼示例給大家講解的非常詳細,需要的朋友可以參考下2024-02-02
AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法
今天小編就為大家分享一篇AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10

