AngularJS：只顯示最後一個標籤上的過濾內容

Question

我想在引導標籤中使用角度過濾器。然而，只有最後一個選項卡顯示我所過濾的內容選項卡的其餘都是反應遲鈍（「專業人士」選項卡）

標記

<div class="panel-body" ng-controller="exploreController as exploreCtrl"> 
    <ul class="nav nav-tabs" role="tablist" id="Tabs"> 
     <li role="presentation" ng-class="{active:exploreCtrl.isSelected(1)}" > 
     <a aria-controls="project" role="tab" ng-click="exploreCtrl.select(1)">Projects</a></li> 

     <li role="presentation" ng-class="{active:exploreCtrl.isSelected(2)}" > 
     <a aria-controls="team" role="tab" ng-click="exploreCtrl.select(2)">Teams</a></li> 

     <li role="presentation" ng-class="{active:exploreCtrl.isSelected(3)}" > 
     <a aria-controls="prof" role="tab" ng-click="exploreCtrl.select(3)">Professionals</a></li> 

<div class="tab-content"> 
     <ul class="media-list tab-pane fade in active"> 
     <li ng-repeat = "proteam in exploreCtrl.proteams | filter:exploreCtrl.filtText"> 

<div class="panel-body"> 
    <div class="media-left media-middle"> 

</div> 
    <div class="media-body"> 
     <h2 class="media-heading">{{proteam.name}} </h2> 
     <span class="label label-danger">{{proteam.tag1}}</span> 
     <p>{{proteam.description}} 
     </p></div></div></li></ul></div> 

的Javascript 這是「setTab」和' checkTab'用於確保ng-click和ng-class正在獲取正確的值。

var app = angular.module('exploresModule',[]); 
app.controller('exploreController',function() { 

    this.tab=1; 
    this.filtText = ''; 
    var proteams = [ 
     { 
      name:'Ziyad Alvi', 
      tag1:'C++', 
      type:'prof' 
     }, 
     { 
      name:'Organic Foods', 
      tag1:'food', 
      type:'project' 
     }, 
     { 
      name:'Telekenisis', 
      tag1:'Xmen', 
      type:'project' 
     } ]; 

    this.proteams = proteams; 

    this.select = function(setTab) { 
     this.tab = setTab; 

     if (setTab === 1) { this.filtText = 'project'; } 
     if (setTab === 2) { this.filtText = 'team'; } 
     if (setTab === 3) { this.filtText = 'prof'; } 
     else this.filtText = ''; 
    }; 

    this.isSelected = function(checkTab) { 
     return this.tab === checkTab; 
    } 
}); 

Answer 1

的問題是與條件語句寫

的方式，最後else時數不3.

所以當數量爲一個或兩個會一直運行...它得到if(setTab ===3)，因爲它不是else將該值設置爲空字符串

可以使用A switch。或者總是return，如果它是一個或兩個或使用一系列if/else

this.select = function(setTab) { 
    this.tab = setTab; 

    if (setTab === 1) { 
     this.filtText = 'project'; 
    } else if (setTab === 2) { 
     this.filtText = 'team'; 
    } else if (setTab === 3) { 
     this.filtText = 'prof'; 
    } else { 
     this.filtText = '';  
    }; 

    }; 

或

this.select = function(setTab) { 
    this.tab = setTab; 

    if (setTab === 1) { this.filtText = 'project'; return;} 
    if (setTab === 2) { this.filtText = 'team'; return;} 
    if (setTab === 3) { this.filtText = 'prof'; } 
    else this.filtText = ''; 
}; 

DEMO