Question

我有一些这样的数据：

people = [
    {
        names: [
            {first: "Joe", last: "Smith"}, 
            {first: "Joseph", last: "Smith"}, 
            ...
        ]
    }, 
    ...
]

换句话说，具有名称数组的对象数组。例如，一个人可以被称为“乔史密斯”或“约瑟夫史密斯”。如何使用filter仅搜索名称的第一个元素？ IE：如果我输入“Jo”或“Smith”，它会找到第一个人。但是，如果我输入“seph”，它就不会。

我一直在关注examples on this page，但实际上并没有在数组内部进行过滤的示例。这是我尝试过但它给了我一个错误：

<input ng-model="search.names[0].$">

TypeError：无法设置未定义的属性'$'

Answer 1

这可以解决这个问题吗？

说你的输入是

<input ng-model="search.name" type="text">

然后，您可以显示如下结果：

<div ng-repeat="person in people[0].names | filter: alias">...</div>

控制器：

$scope.alias = function (object) {
  if (object.first.match(new RegExp($scope.search.name))) {
    return true;
  }

  return false;
};

Answer 2

工作代码

输入HTML

<input ng-model="searchTerm">

结果

<tr ng-repeat="p in people | filter:searchFunc">...</tr>

控制器

$scope.searchFunc = function(person) {
    var firstPersonsName = [person.names[0]]; // Wrapping in array since the 'filter' $filter expects an array
    var matches = $filter('filter')(firstPersonsName, $scope.searchTerm); // Running firstPersonsName through filter searching for $scope.searchTerm
    return matches.length > 0;
}

Plunker Demo

回答标题中的问题

我使用filter玩了一下，当为它指定一个模式对象时，你似乎不能超越一个级别，例如ng-model="search.names"有效但ng-model="search.names.otherVal"没有。

此外，即使filter支持超出一个级别，您仍然无法执行ng-model="search.names[0]"。这是因为filter期望输入是一个数组，但是您的names数组的元素都是例如 people[0].names[0] == {first: "Joe", last: "Smith"}的对象，因此过滤将永远不会有效。

完全通过视图执行操作并且控制器中没有额外代码的唯一方法就是创建自己的自定义过滤器来处理您的案例。

在AngularJS中，是否可以仅使用视图过滤数组的特定元素？

2 个答案:

工作代码

回答标题中的问题