AngularJS使用ng-repeat和ng-if實現資料的刪選顯示效果樣本【適用於表單資料的顯示】_AngularJS

本文執行個體講述了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程式設計有所協助。