本文實例講述了AngularJS使用ng-repeat和ng-if實現數據的刪選顯示效果。分享給大家供大家參考，具體如下：
1.首先重復回顧一下ng-repeat指令
ng-repeat可以實現內容的重復顯示，比如我們可以寫如下代碼
<script> angular.module("myapp",[]).controller("mycontroller",function($scope){ $scope.data=[{name:"yu1",age:10,partment:"產品部"}, {name:"yu2",age:11,partment:"產品部"}, {name:"yu3",age:12,partment:"事業部"}, {name:"yu4",age:13,partment:"事業部"}, {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.此時的問題是，如果我們要刪選的是部門為“產品部”的員工
那么可以使用ng-repeat+ng-if的方法，這樣可以實現簡單的前端刪選
我們只需要在ng-repeat后面簡單的加上ng-if="member.partment=='產品部即可'"
代碼修改如下：
<tr ng-repeat="member in data" ng-if="member.partment=='產品部'">
效果為：
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答
