AngularJS使用ng-repeat和ng-if實現(xiàn)數(shù)據(jù)的刪選顯示效果示例【適用于表單數(shù)據(jù)的顯示】

更新時間：2016年12月13日 14:28:20 作者：小小小小小亮

這篇文章主要介紹了AngularJS使用ng-repeat和ng-if實現(xiàn)數(shù)據(jù)的刪選顯示效果,非常適用于表單數(shù)據(jù)的顯示使用,涉及ng-repeat和ng-if命令的相關使用技巧,需要的朋友可以參考下

本文實例講述了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)品部'">

效果為：

更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設計有所幫助。

您可能感興趣的文章:

詳解Angular 4.x NgIf 的用法
本篇文章主要介紹了詳解Angular 4.x NgIf，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
AngualrJs清除定時器遇到的坑
這篇文章主要介紹了AngualrJs清除定時器遇到的坑,需要的朋友可以參考下
2017-10-10
詳解angular2封裝material2對話框組件
本篇文章主要介紹了詳解angular2封裝material2對話框組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
Angular瀏覽器插件Batarang介紹及使用
本篇文章主要介紹了Angular瀏覽器插件Batarang介紹及使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
體驗jQuery和AngularJS的不同點及AngularJS的迷人之處
AngualrJS是一個很貼心的web應用框架，本篇通過jQuery和Angular兩種方式來實現(xiàn)同一個實例，從而體驗兩者的不同點以及AngularJS的迷人之處
2016-02-02
解決angular的$http.post()提交數(shù)據(jù)時后臺接收不到參數(shù)值問題的方法
這篇文章為大家分享了解決angular的$http.post()提交數(shù)據(jù)時后臺接收不到參數(shù)值問題的方法，感興趣的小伙伴們可以參考一下
2015-12-12
angularjs數(shù)組判斷是否含有某個元素的實例
下面小編就為大家分享一篇angularjs數(shù)組判斷是否含有某個元素的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
AngularJS 如何在控制臺進行錯誤調(diào)試
本文主要介紹AngularJS 如何在控制臺進行錯誤調(diào)試，還不錯，分享給大家，希望給大家做一個參考。
2016-06-06
AngularJS ng-repeat指令中使用track by子語句解決重復數(shù)據(jù)遍歷錯誤問題
這篇文章主要介紹了AngularJS ng-repeat指令中使用track by子語句解決重復數(shù)據(jù)遍歷錯誤問題,結(jié)合實例形式分析了ng-repeat指令遍歷JavaScript數(shù)組錯誤的原因與相關解決技巧,需要的朋友可以參考下
2017-01-01
AngularJS之ionic 框架下實現(xiàn) Localstorage本地存儲
這篇文章主要介紹了AngularJS之ionic 框架下實現(xiàn) Localstorage本地存儲，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04