Если у меня есть сложный объект с объектами как значения свойства, как я могу фильтровать один из вложенных свойств?
Можно ли это сделать с помощью фильтра Og ng-repeat?
Данные
{
Name: 'John Smith',
Manager: {
id: 123,
Name: 'Bill Lumburg'
}
}
ngRepeat
<li ng-repeat="e in emps | filter:Manager.Name">{{ e.Name }}</li>
Вам нужно передать аргумент для фильтрации по:
<input ng-model="filter.key">
<ul>
<li ng-repeat="e in list | filter: {Manager: {Name: filter.key}}">
{{e.Name}} (Manager: {{e.Manager.Name}})
</li>
</ul>
Чтобы фильтровать с помощью свойства с несколькими глубинами, нам нужно создать собственный фильтр. Что я имею в виду, нам нужно создать свою собственную функцию для фильтрации данных в объекте и возврата требуемого объекта (отфильтрованный объект).
Например, мне нужно отфильтровать данные из объекта ниже -
[
{
"document":{
"documentid":"1",
"documenttitle":"test 1",
"documentdescription":"abcdef"
}
},
{
"document":{
"documentid":"2",
"documenttitle":"dfjhkjhf",
"documentdescription":"dfhjshfjdhsj"
}
}
]
В HTML мы используем ng-repeat для отображения списка документов -
<div>
//search input textbox
<input ng-model="searchDocument" placeholder="Search">
</div>
<div ng-repeat="document in documentList | filter: filteredDocument">
//our html code
</div>
В контроллере мы записываем функцию фильтра для возврата отфильтрованного объекта с использованием двух свойств объекта: "documenttitle" и "documentdescription", пример кода ниже:
function filterDocuments(document)
{
if($scope.searchDocument)
{
if(document.documentTitle.toLowerCase().indexOf($scope.searchDocument.toLowerCase()) !== -1 || document.document.shortDescription.toLowerCase().indexOf($scope.searchDocument.toLowerCase()) !== -1)
{
//returns filtered object
return document
}
}else {
return document;
}
}
Где $scope.searchDocument - это переменная области, привязанная к текстовому полю поиска (тег ввода HTML), в котором пользователь может вводить текст для поиска.
Если вы фильтруете несколько свойств, синтаксис будет похож на ниже.
<ul>
<li ng-repeat="item in list | {filter: top_object_property_name: value, top_object_property_with_nested_objects_name: {nested_object_property_name: value}}">
...
</li>
</ul>
например:
var employees = [name: 'John', roles: [{roleName: 'Manager'},{roleName: 'Supervisor'}]];
<li ng-repeat="staff in employees | {filter: name: 'John', roles: {roleName: 'Manager'}}">
...
</li>
В последней версии вложенного фильтра obj, установленного по умолчанию, реализуется по умолчанию. Может использовать фильтр нормально.