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;但我不确定你的做法是做你想做的事情：目前，如果你确实根据他们的会议名称选择了项目，那么所有人都有相同的名字（或类似的东西，如果你没有这样做的话严格的搜索），你的订单基于此。

通过单击单独的选项卡，AngularJS筛选器数组列表

1 个答案: