AngularJS过滤器数组列表通过点击单独的标签

Question

我有一个数组列表，显示用户的会议名称和位置。默认情况下，我正在筛选列表以显示会议名称，并希望有一个选项可以单击一个选项卡，然后按位置名称筛选列表。这是目前我有：

数组列表：

$scope.requests = [ 
    { 
     type: "meeting1", 
     meetingName: "Radiology San Diego", 
     location:"Sheraton Ballroom 5S", 
     subitems: [ 
      { 
       name: "ESCALATED", 
       desc: "Power strips at every table", 
       priority:"1" 
      }, 
      { 
       name: "OPEN", 
       desc: "Extra table for 3", 
       priority:"3" 
      }, 
      { 
       name: "ACKNOWLEDGED", 
       desc: "Projector for meeting", 
       priority:"2" 
      }, 
      { 
       name: "CLOSED", 
       desc: "Sub-Item 2", 
       priority:"5" 
      }, 
      { 
       name: "CANCELLED", 
       desc: "Sub-Item 2", 
       priority:"1" 
      } 
     ] 
    }, 
    { 
     type: "meeting2", 
     meetingName: "California Almond Growers", 
     location:"Sheraton FL14", 
     subitems: [ 
      { 
       name: "ESCALATED", 
       desc: "Sub-Item 1", 
       priority:"1" 
      }, 
      { 
       name: "OPEN", 
       desc: "Sub-Item 2", 
       priority:"4" 
      }, 
      { 
       name: "ACKNOWLEDGED", 
       desc: "Sub-Item 2", 
       priority:"2" 
      } 
     ] 
    }, 
    { 
     type: "meeting3", 
     meetingName: "Association of Amateur Archaeologists", 
     location:"Ansley 1- FL14", 
     subitems: [ 
      { 
       name: "ESCALATED", 
       desc: "Sub-Item 1", 
       priority:"1" 
      }, 
      { 
       name: "OPEN", 
       desc: "Sub-Item 2", 
       priority:"3" 
      } 
     ] 
    } 
]; 

JSP：

<ul class="nav nav-tabs"> 
    <li class="active"> 
     <a id="tab-meeting" data-toggle="tab" 
      ng-click="tab(1)">By MEETING</a> 
    </li> 
    <li> 
     <a id="tab-location" data-toggle="tab" 
      ng-click="tab(2)">By LOCATION</a> 
    </li> 
</ul> 
<div class="requestView"> 
    <div class="requestInformation" 
     ng-repeat="mName in requests | filter:name | orderBy:sort"> 
     <div class="row"> 
      <div class="col-md-10"> 
       <h4 ng-model="filterRequest">{{mName.location}}</h4> 
      </div> 

JS来切换标签：

$scope.orderProp='location'; 

$scope.tab = function (tabIndex) { 
    //Sort by meeting name 
    if (tabIndex == 1){ 
     //alert(tabIndex); 
     $scope.orderProp='meetingName'; 

    } 
    //Sort by meeting location 
    if (tabIndex == 2){ 
     $scope.orderProp = 'location'; 
    } 
}); 

Answer 1

你确定你正在寻找一个过滤？您正在使用的过滤器根据您提供的标准，选择主列表中的项目子集。此刻，除非您没有显示$ scope.name变量，否则您的过滤器可能什么也不做。

假设您确实只想选择一小部分项目（例如仅在喜来登的会议中），则筛选会接受多个有效语法;您正在使用的实际上是在所有字段中搜索约束。要特定过滤给定的字段，如果您愿意，可以使用filter:{field:constraint}; ，您可以在同一个过滤器对象中组合多个条件。还请注意，如果您希望进行严格搜索，则可以添加：true（如filter:object:true）。

另请注意，除非我遗漏了某些东西，否则您可以不使用排序功能，只需使用| orderBy : criterium;但我不确定你的分类是否在做你想做的事情：目前，如果你确实已经根据他们的会议名称选择了项目，那么所有人都会使用相同的名字（或者类似的名字，如果你没有做严格的搜索），你基于你的订单。