<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)文章

詳解Angular2響應(yīng)式表單
這篇文章主要介紹了詳解Angular2響應(yīng)式表單，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
Angular7.2.7路由使用初體驗(yàn)
這篇文章主要介紹了Angular7.2.7路由使用初體驗(yàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
AngularJS service之select下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了AngularJS service之select下拉菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的簡(jiǎn)單方法
最近做項(xiàng)目的時(shí)候又遇到了驗(yàn)證碼倒計(jì)時(shí)的需求，發(fā)現(xiàn)這個(gè)功能還是挺實(shí)用的，所以就想著總結(jié)一下，下面這篇文章主要給大家介紹了關(guān)于利用Angular.js如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕的簡(jiǎn)單方法，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-10-10
利用Jasmine對(duì)Angular進(jìn)行單元測(cè)試的方法詳解
單元測(cè)試是一種能夠幫助開發(fā)者驗(yàn)證代碼中某一部分有效性的技術(shù)。下面這篇文章主要給大家介紹了關(guān)于利用Jasmine對(duì)Angular進(jìn)行單元測(cè)試的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-06-06
Angular實(shí)現(xiàn)防抖和節(jié)流的示例代碼
這篇博客主要是詳細(xì)介紹兩種常用Angular實(shí)現(xiàn)防抖和節(jié)流的方法：使用RxJS操作符和使用Angular自帶的工具,文中通過(guò)代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下
2024-02-02
AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法
今天小編就為大家分享一篇AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
Angular封裝WangEditor富文本組件的方法
這篇文章主要介紹了Angular封裝WangEditor富文本組件,得益于Angular的強(qiáng)大，封裝WangEditor組件非常簡(jiǎn)單，需要的朋友可以參考下
2021-07-07
AngularJS入門教程之表單校驗(yàn)用法示例
這篇文章主要介紹了AngularJS表單校驗(yàn)用法,結(jié)合實(shí)例形式分析了AngularJS各種常見(jiàn)的表單校驗(yàn)功能及使用技巧,需要的朋友可以參考下
2016-11-11
angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定
AngularJS在$scope變量中使用臟值檢查來(lái)實(shí)現(xiàn)了數(shù)據(jù)雙向綁定。和Ember.js數(shù)據(jù)雙向綁定中動(dòng)態(tài)設(shè)施setter和getter不同，臟治檢查允許AngularJS監(jiān)視那些存在或者不存在的變量。
2015-09-09