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

Question

我想在 bootstrap 个选项卡中使用 angular 个过滤器。但是，只有最后一个选项卡显示过滤后的内容，其余选项卡没有响应（"Professionals" 选项卡）

标记

<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

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

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

所以当数字是一或二时......它到达 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

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

AngularJS: Only shows filtered content on last tab

javascript

twitter-bootstrap

angularjs

angularjs-filter