AngularJS：仅在最后一个选项卡上显示过滤后的内容答案

【问题标题】：AngularJS: Only shows filtered content on last tabAngularJS：仅在最后一个选项卡上显示过滤后的内容
【发布时间】：2016-03-05 21:40:01
【问题描述】：

我想在引导选项卡中使用角度过滤器。但是，只有最后一个选项卡向我显示了过滤后的内容，其余选项卡没有响应（“专业人士”选项卡）

标记

<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;
    }
});

【问题讨论】：

建议你在plunker创建一个复制问题的演示

标签： javascript angularjs twitter-bootstrap angularjs-filter

【解决方案1】：

问题在于条件句的编写方式

最后一个else 将始终在数字不是 3 时运行。

所以当数字是一或二时......它会到达if(setTab ===3)，因为它不是else，所以将值设置为空字符串

可以使用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

【讨论】：