Я хочу применить $filter из окна поиска к вложенному ng-repeat. У меня есть массив категорий, каждая категория содержит список элементов. Когда я помещаю $filter в 1-й ngRepeat, он фильтрует и сохраняет категорию, в которой есть правильные элементы. Однако я просто хочу отфильтровать список элементов.
Я создал Plnkr, чтобы показать свой пример. http://plnkr.co/edit/KIsn9ZPuIqUMlwkORnrE
angular.module('myapp',[])
.controller('AllCtrl', function($scope){
$scope.data = [
{name: "ebooks", items: [
{name: "Learning AngularJS", type: "pdf"},
{name: "Learning Javascript", type: "pdf"},
]},
{name: "books", items: [
{name: "AngularJS for dummy", type: "old"},
{name: "Javascript for dummy", type: "new"}
]}
];
});
HTML-файл:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.0-beta.3/angular.js" data-semver="1.4.0-beta.3" data-require="angular.js@*"></script>
<script data-require="firebase@*" data-semver="1.0.18" src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" data-semver="3.3.1" data-require="bootstrap-css@*" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp">
<div class="col-md-9" ng-controller="AllCtrl">
<input type="text" class="form-control" placeholder="Search here..." ng-model="search" />
<div style="height: 10px"></div>
<div ng-repeat="cat in data | orderBy: 'name' | filter:search">
<button class="btn btn-primary btn-sm">{{$index +1}}</button> Category: {{cat.name}}
<dl class="dl-horizontal" ng-repeat="item in cat.items">
<dt>{{item.name}}</dt>
<dd>{{item.type}}</dd>
</dl>
</div>
</div>
</body>
</html>
Пожалуйста, помогите мне.
Спасибо