Question

我想在引导标签中使用角度过滤器。但是，只有最后一个标签显示已过滤的内容，其余选项卡无响应（＆＃34;专业人员＆＃34;标签）

标记

<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 这就是＆＃39; setTab＆＃39;和＆＃39; checkTab＆＃39;用于确保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：仅显示最后一个选项卡上的过滤内容

1 个答案: