如何在嵌套的ngRepeat中对第二个ngRepeat应用过滤器
How to apply filters on second ngRepeat in nested ngRepeat?
我想将搜索框中的$filter应用于嵌套的ng-repeat。我有一个类别数组,每个类别都包含一个项目列表。当我$filter放在第一个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"}
]}
];
});
文件:
<!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>
请帮助我。
谢谢
如果要
过滤内部项目列表,请在该列表本身中指定过滤器。
为内部ng-repeat
放置过滤器解决了您的问题。
<div ng-repeat="cat in data | orderBy: 'name'">
<button class="btn btn-primary btn-sm">{{$index +1}}</button> Category: {{cat.name}}
<dl class="dl-horizontal" ng-repeat="item in cat.items | filter:search">
<dt>{{item.name}}</dt>
<dd>{{item.type}}</dd>
</dl>
</div>
这是工作小提琴
希望这能帮助你。谢谢。
相关文章:
- 下拉选择可自动更改第二个下拉选择
- 为什么不'在JQuery中找到第二个css选择器的工作
- 当单击第一个李时,它显示内容一,当单击第二个李时,它显示内容二
- CORS-重定向到第二个GET正在接收的页面
- 正则表达式与数字中的第二个点匹配
- 如何在react js中移动第二个组件
- 使用Javascript,如何显示<tr>在另一<tr>悬停时,隐藏第二个<tr>
- 关闭第二个事件源上的第一个事件源's onopen方法
- D3从嵌套的JSON中绘制第二个圆环图
- IE11中的第二个调用取消了第一个Fetch API调用
- 第一个字第一个字符第二个字第二个字符,一直到数组结束
- 角度指令:指向第二个元素
- 时间选择器:如何通过更改第一个值来更改第二个值
- 我如何从字符串中选出第一个单词的第一个字母,然后再选出第二个单词
- 与网络界面相比,谷歌搜索API有时会重复第一个结果,有时会重复第二个结果
- 第二个存在条件不起作用
- 从第一个日期选择器定义第二个日期选择器的开始日期
- 如果未选择第一个下拉列表,则禁用第二个下拉列表
- Ember.js(v2.4.5)组件不是't错过第二个动作
- 如何在嵌套的ngRepeat中对第二个ngRepeat应用过滤器