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ù)顯示,比如我們可以寫如下代碼
<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的方法,這樣可以實(shí)現(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入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
相關(guān)文章
AngularJS service之select下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了AngularJS service之select下拉菜單效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07Angular.js實(shí)現(xiàn)獲取驗證碼倒計時60秒按鈕的簡單方法
最近做項目的時候又遇到了驗證碼倒計時的需求,發(fā)現(xiàn)這個功能還是挺實(shí)用的,所以就想著總結(jié)一下,下面這篇文章主要給大家介紹了關(guān)于利用Angular.js如何實(shí)現(xiàn)獲取驗證碼倒計時按鈕的簡單方法,需要的朋友可以參考借鑒,下面來一起看看吧。2017-10-10利用Jasmine對Angular進(jìn)行單元測試的方法詳解
單元測試是一種能夠幫助開發(fā)者驗證代碼中某一部分有效性的技術(shù)。下面這篇文章主要給大家介紹了關(guān)于利用Jasmine對Angular進(jìn)行單元測試的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-06-06Angular實(shí)現(xiàn)防抖和節(jié)流的示例代碼
這篇博客主要是詳細(xì)介紹兩種常用Angular實(shí)現(xiàn)防抖和節(jié)流的方法:使用RxJS操作符和使用Angular自帶的工具,文中通過代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下2024-02-02AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法
今天小編就為大家分享一篇AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定
AngularJS在$scope變量中使用臟值檢查來實(shí)現(xiàn)了數(shù)據(jù)雙向綁定。和Ember.js數(shù)據(jù)雙向綁定中動態(tài)設(shè)施setter和getter不同,臟治檢查允許AngularJS監(jiān)視那些存在或者不存在的變量。2015-09-09