AngularJS：显示响应数组

Question

我目前有一个包含两个动态下拉列表的表单（Location＆amp; Branch）。当选择Location个值之一时，Branch将自动填充该位置的相应分支。

<select ng-model="formData.location" 
        ng-options="rg as rg.type for rg in region">
    <option value="">Choose Location</option>
</select>

<select ng-model="formData.branches" 
        ng-options="c as c[formData.location.displayName] for c in formData.location.data | orderBy:'branch'">
    <option value="">Choose Branch</option>
</select>

Branch值取自此控制器：

scope.metro = [
    {"branch": "SM North EDSA", "alias": "northedsa"}, 
    {"branch": "Trinoma", "alias": "trinoma"}, 
    {"branch": "Robinsons Galleria", "alias": "robgalleria"}, 
    // etc...
];

scope.region = [
    { type: 'Metro Manila', data:scope.metro, displayName:'branch', alias:'alias'},
    { type: 'Central Luzon', data:scope.central, displayName:'branch', alias:'alias'},
    { type: 'North Luzon', data:scope.north, displayName:'branch', alias:'alias'},
    // etc...
  ];

现在，在表单中，在option的每次Branch更改中，都会有一个预生成的代码来自我的数据库中的表（在每一行上分配），由{获得{1}}像这样：

ng-repeat

我的数据库表如下所示：

当它保持原样时（每次迭代显示100个代码）。但是当我使用<div ng-repeat="codes in response"> <span ng-if="((codes.branch == formData.branches.alias) && (codes.taken == 0))"> {{codes.code}} </div> 之类的过滤器时，我只获得数据库表中行的第一个索引。我需要的是在limitTo:1值的每次翻转时获得response数组的第一个元素。

为了更清楚地解释，通过在我的控制器中使用此功能来完成此ng-repeat：

Branch

我被告知在控制器中这样做，如果我想获得每个数组的第一个元素，但我不知道该怎么做。我有空的时候会张贴一个傻瓜。我现在只需要解决这个问题，因为我有最后期限要在白天结束前见面。

我希望这个问题即使没有一个傻瓜也是清楚的。提前谢谢！

Answer 1

您可以将多个过滤器连接在一起，第一个过滤器根据分支进行过滤，然后限制返回项目的数量：

<div ng-repeat="codes in response | filter: {branch: formData.branches.alias, taken: 0} | limitTo: 1">
   {{codes.code}}
</div>

在这种情况下，可以使用内置的filter过滤器，因为它允许为多个属性指定谓词以匹配AND条件。对于任何更复杂的条件，我建议使用谓词函数：

$scope.filterBy = function(a, b){
  return function(item){
    return item.foo === a || item.bar === b;
  }
}

并像这样使用它：

<div ng-repeat="item in items | filter: filterBy('foo', 'bar')">