2016-08-26 4 views
0

Недавно я начал работу с угловым2. Также хочу знать правильный подход для прецедента. У меня есть массив таких объектов:Поиск значения во вложенном массиве объектов 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)

+0

Просто проблема синтаксиса: пользователи: Array

+0

@KobiCohen исправлено. – monica

+0

Что это имеет отношение к угловому? –

ответ

-1

Как вы можете фильтровать в HTML или вы хотите фильтровать в контроллере?

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

Я нашел plunkr кого-то еще делать что-то подобное:

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

Контроллер:

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

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

     return tag === $scope.searchTerm; 

    }); 
    }); 
+0

Я думаю, он попросил решение angular2 rc4 –

+0

Ахх, извините, пропустил эту часть. Они не покончили с фильмом в Angular 2, хотя они? – cullimorer

+0

Я хочу найти в контроллере. И это похоже на вариант поиска, который у вас есть в верхней части таблицы. Независимо от того, какую строку вы пишете в поиске, в таблице отображаются только результаты, соответствующие введенной строке. – monica

0

Смотрите здесь How to apply filters to *ngFor

В принципе реализовать трубу, возвращающих что вам нужно

+0

Трубы не считаются отличной идеей для большинства сценариев фильтрации или сортировки данных. Ознакомьтесь с разделом в конце этой страницы: https://angular.io/docs/ts/latest/guide/pipes.html. Пример цитаты: «Угловая команда и многие опытные разработчики Angular настоятельно рекомендуют вам перемещать логику фильтрации и сортировки в сам компонент». –

0

В 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>

Смежные вопросы