Question

我最近开始研究angular2。所以想知道用例的正确方法。我有一个像这样的对象数组：

users : Array<Object> = [{
    id: 1,
    tags: [{
        name: 'foo',
        age: 21
    }, {
        name: 'aaa',
        age: 23
    }]
}, {
    id: 2,
    tags: [{
        name: 'ball',
        age: 53
    }, {
        name: 'ttt',
        age: 43
    }]
}, {
    id: 3,
    tags: [{
        name: 'bar',
        age: 32
    }, {
        name: 'fsf',
        age: 11
    }]
}]

我需要将此数据显示为表格并在其上提供搜索选项。需要根据用户在搜索字段中输入的文本来过滤数据。在搜索中输入的数据可以匹配此对象中的任何值。我正在使用angular2 rc4。

我需要帮助实现此搜索以及我应该采用的方式。我也在使用lodash。有什么方法可以利用它的功能。（不使用jquery）

Answer 1

请参阅此处How to apply filters to *ngFor

基本上实现一个返回所需内容的管道

Answer 2

在Lodash中，您可以使用_.filter，_.some和_.includes进行过滤：

var users = [{"id":1,"tags":[{"name":"foo","age":21},{"name":"aaa","age":23}]},{"id":2,"tags":[{"name":"ball","age":53},{"name":"ttt","age":43}]},{"id":3,"tags":[{"name":"bar","age":32},{"name":"fsf","age":11}]}];

var searchItem = "foo";

var filtered = _.filter(users, user =>
                 _.some(user.tags, tag =>
                   _.includes(tag, searchItem)));

console.log(filtered);

<script src="https://cdn.jsdelivr.net/lodash/4.15.0/lodash.min.js"></script>

如果您还想查找子串匹配，请将字段映射到字符串，然后使用String#indexOf：

var users = [{"id":1,"tags":[{"name":"foo","age":21},{"name":"aaa","age":23}]},{"id":2,"tags":[{"name":"ball","age":53},{"name":"ttt","age":43}]},{"id":3,"tags":[{"name":"bar","age":32},{"name":"fsf","age":11}]}];

var searchItem = "f";

var filtered = _.filter(users, user =>
                 _.some(user.tags, tag =>
                   _.some(tag, field =>
                     _.toString(field).indexOf(searchItem) != -1)));

console.log(filtered);

<script src="https://cdn.jsdelivr.net/lodash/4.15.0/lodash.min.js"></script>

Answer 3

以下是您在HTML中过滤的方式，或者您想要在控制器中进行过滤？

 <li ng-repeat="user in users | filter: { tags: [{ age: search.age}] }">

我找到了其他人做类似事情的傻瓜：

http://jsfiddle.net/suCWn/12/

控制器：

$scope.filteredUsers = $filter('filter')(users, function(value) {

    return angular.forEach(value.tags, function(tag) {

      return tag === $scope.searchTerm;

    });
  });

在嵌套的对象数组中搜索一个值angular2

3 个答案: