使用Angular ng-repeat遍历非统一的对象数组

Question

假设我有以下数据：

sampleData = [{'artist': 'John', 'id': 1}, {'artist': 'John', 'id': 2},
{'artist': 'Tim', 'id': 3}, {'artist': 'Jimmy', 'id': 4}, {'venue': 'Rock club', 'id':1}, {'venue': 'Rock club', 'id': 2}, {'venue': 'Tonys', 'id': 3}]

此数据可以在我的控制器中找到并且不会更改。我想要做的是在主<ul> 中构造两个嵌套列表。

鉴于我有以下输入，其中用户键入“J”或“j”：

<input ng-model="query" type="text" placeholder="Filter by">

这是我希望使用 ng-repeat 呈现的内容（除非我不必使用 ng-repeat）：

<ul>
  <h1>artist</h1>
  <li>
    <ul>
      <li>John (There are two 2 Johns)</li>
      <li>Jimmy</li>
    </ul>
  </li>
  <li>
    <ul>
    <h1>Venue</h1>
      <li>Jock Club (There are two 2 Jock Club)</li>
    </ul>
  </li>
</ul>

最初，我尝试编写一个客户过滤器，从过滤后的列表中获取结果并处理数据。 Angular 对我的过滤器不满意，因为我对原始数据的修改太多，所以我收到了一个无限的摘要循环。所以现在我回到第一方，试图决定这是否最好用指令或过滤器来完成。我怀疑我需要在我的控制器或指令中重组我的数据以获得我的预期结果。同样，我的预期结果将是根据用户输入的内容过滤sampleData 的艺术家和场地子列表。实时更新是理想的选择。

Answer 1

如果您不想重构数据，可以通过在控制器中设置函数来实现，该函数使用过滤器为每个 ng-repeat 仅获取您想要的项目：

在控制器中：

var sampleData = [...];
$scope.query = '';

$scope.getArtists = function () {
   return $filter('filter')(sampleData, function (item) {
       return item.hasOwnProperty('artist') && item.artist.indexOf($scope.query) > -1; 
   });
};

$scope.getVenues = function () {
   return $filter('filter')(sampleData, function (item) {
       return item.hasOwnProperty('venue') && item.venue.indexOf($scope.query) > -1;  
   });
};

HTML：

<input ng-model="query" type="text" placeholder="Filter by">
<ul>
    <li ng-repeat="artist in getArtists()"></li>
</ul>
<ul>
    <li ng-repeat="venue in getVenues()"></li>
</ul>

---------

但是，最好预先重组数据，以便您能够更有效地使用单个函数遍历场地和艺术家：

在控制器中：

var sampleData = [...];
$scope.query = '';
$scope.artists = [];
$scope.venues = [];

angular.forEach(sampleData, function (item) {
    if (item.hasOwnProperty('artist') {
        $scope.artists.push({
            id: item.id,
            name: item.artist
        });
    });
    else if (item.hasOwnProperty('venue') {
        $scope.venues.push({
            id: item.id,
            name: item.venue
        });
    });
});

$scope.getMatching = function (items, query) {
    return $filter('filter')(items, function (item) {
        return (item.name.indexOf(query) > -1); 
    });
};

HTML：

<input ng-model="query" type="text" placeholder="Filter by">
<ul>
    <li ng-repeat="artist in getMatching(artists, query)"></li>
</ul>
<ul>
    <li ng-repeat="venue in getMatching(venues, query)"></li>
</ul>