AngularJS使用ng-repeat和ng-if實(shí)現(xiàn)數(shù)據(jù)的刪選顯示效果示例【適用于表單數(shù)據(jù)的顯示】
本文實(shí)例講述了AngularJS使用ng-repeat和ng-if實(shí)現(xiàn)數(shù)據(jù)的刪選顯示效果。分享給大家供大家參考，具體如下：
1.首先重復(fù)回顧一下ng-repeat指令
ng-repeat可以實(shí)現(xiàn)內(nèi)容的重復(fù)顯示，比如我們可以寫(xiě)如下代碼
<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.此時(shí)的問(wèn)題是，如果我們要?jiǎng)h選的是部門為“產(chǎn)品部”的員工
那么可以使用ng-repeat+ng-if的方法，這樣可以實(shí)現(xiàn)簡(jiǎn)單的前端刪選
我們只需要在ng-repeat后面簡(jiǎn)單的加上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入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
本篇文章主要介紹了詳解Angular 4.x NgIf，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
這篇文章主要介紹了AngualrJs清除定時(shí)器遇到的坑,需要的朋友可以參考下2017-10-10
詳解angular2封裝material2對(duì)話框組件
本篇文章主要介紹了詳解angular2封裝material2對(duì)話框組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
本篇文章主要介紹了Angular瀏覽器插件Batarang介紹及使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
體驗(yàn)jQuery和AngularJS的不同點(diǎn)及AngularJS的迷人之處
AngualrJS是一個(gè)很貼心的web應(yīng)用框架，本篇通過(guò)jQuery和Angular兩種方式來(lái)實(shí)現(xiàn)同一個(gè)實(shí)例，從而體驗(yàn)兩者的不同點(diǎn)以及AngularJS的迷人之處2016-02-02
解決angular的$http.post()提交數(shù)據(jù)時(shí)后臺(tái)接收不到參數(shù)值問(wèn)題的方法
這篇文章為大家分享了解決angular的$http.post()提交數(shù)據(jù)時(shí)后臺(tái)接收不到參數(shù)值問(wèn)題的方法，感興趣的小伙伴們可以參考一下2015-12-12
angularjs數(shù)組判斷是否含有某個(gè)元素的實(shí)例
下面小編就為大家分享一篇angularjs數(shù)組判斷是否含有某個(gè)元素的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
AngularJS 如何在控制臺(tái)進(jìn)行錯(cuò)誤調(diào)試
本文主要介紹AngularJS 如何在控制臺(tái)進(jìn)行錯(cuò)誤調(diào)試，還不錯(cuò)，分享給大家，希望給大家做一個(gè)參考。2016-06-06
AngularJS ng-repeat指令中使用track by子語(yǔ)句解決重復(fù)數(shù)據(jù)遍歷錯(cuò)誤問(wèn)題
這篇文章主要介紹了AngularJS ng-repeat指令中使用track by子語(yǔ)句解決重復(fù)數(shù)據(jù)遍歷錯(cuò)誤問(wèn)題,結(jié)合實(shí)例形式分析了ng-repeat指令遍歷JavaScript數(shù)組錯(cuò)誤的原因與相關(guān)解決技巧,需要的朋友可以參考下2017-01-01
AngularJS之ionic 框架下實(shí)現(xiàn) Localstorage本地存儲(chǔ)
這篇文章主要介紹了AngularJS之ionic 框架下實(shí)現(xiàn) Localstorage本地存儲(chǔ)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04