向ng-repeat添加控件以过滤数据
Add controls to ng-repeat to filter data
我有一些json数据,我用ng-repeat输出,我添加了一些表单控件来过滤来自另一个json的数据输出。
简化示例
第一个JSON数据:
var technologies = [
{"id":"5", "slug":"mysql", "label":"MySQL", "category":"database"},
{"id":"4", "slug":"html", "label":"HTML", "category":"markup"}
]
和输出:
<ul>
<li ng-repeat="tech in technologies">
<span>{{tech.label}}</span>
<span><label>required expertise
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></label>
</span>
</li>
</ul>
(实际上,此时的技术已经从用户在另一个页面上做出的另一个选择中过滤出来了,但我认为这没有什么区别)
第二个json包含我想用作过滤器的专长属性
var people = [
{
'label': 'MySQL',
'slug': 'mysql',
'talents':[
{
'name': 'Stanislav Lem',
'expertise': 5,
'desire': 0,
'last_used': '2009-01'
},
{
'name': 'Ijon Tichy',
'expertise': 1,
'desire': 5,
'last_used': '2011-06'
}
]
}, ...
]
…现在它被简单地用作
<ul>
<li ng-repeat="item in people">
{{item.label}}<br>
<ul>
<li ng-repeat="person in item.talents">{{person.name}} · Expertise: {{person.expertise}}</li>
</ul>
</li>
</ul>
我需要的是一个过滤器,它使用第一个输出中的选项来过滤第二个输出。例如,当MySQL required expertise设置为'2'时,只会显示Stanislav Lem。实际上,如果没有人符合专业知识,我还需要一个"没有结果发现"的信息,但我想我可以自己解决这部分问题。
Plunker样本在这里:http://plnkr.co/edit/B0aQp9aCJ2g4OM6fZ3qe?p=preview
工作活塞:http://plnkr.co/edit/jcb6SfKVPkwt7FFCZFHX?p=preview
您需要做的第一件事是将ng-model
属性添加到select
。我把它作为技术的一个属性添加进去,这样你就可以很容易地找到它。
<select ng-model="tech.required">
接下来,我在控制器中添加了以下两个函数,以帮助过滤第二个列表:
$scope.getFilterForSlug = function(slug) {
var technology = getTechBySlug(slug);
return function(person) {
return person.expertise >= (technology.required || 0);
}
}
function getTechBySlug(slug) {
return _.find($scope.technologies, {
slug: slug
});
}
我在getTechBySlug
中使用lodash,顾名思义,基于段塞获得正确的技术对象。使用它,getFilterForSlug
返回一个函数,该函数将人员的专业水平与select
的期望水平进行比较。如果未选择某个选项,则所需级别设置为0。
最后,在HTML中,我添加了以下内容:
<ul>
<li ng-repeat="person in filteredPeople = (item.talents | filter: getFilterForSlug(item.slug))">{{person.name}} · Expertise: {{person.expertise}}</li>
</ul>
<span ng-if='!filteredPeople.length'>No Results!</span>
这段代码根据当前字段获取一个过滤器,然后过滤使用该函数的人。它将结果存储在变量filteredPeople
中,该变量在span
中用于在没有结果时显示消息。
- 通过API调用过滤数据
- 如何在D3.js中绘制地图投影上的点,并使用范围滑块过滤数据
- 如何使用javascript、jquery或其他javascript框架过滤数据
- 在解析时使用变量过滤数据
- 如何用使用剔除数据和“数据”两者计算的数据来过滤数据;外部“;数据
- d3在鼠标悬停上过滤数据之后从选择中提取值
- AngularJS-显示过滤数据的长度
- 如何在 Angular js 中按日期过滤数据
- 如何在数组循环中过滤数据
- Javascript - 使用文本输入框过滤数据
- 如何在数组循环 222 中过滤数据
- 基于动态复选框过滤数据 角度 JS中的类别
- 从数组 java 脚本中过滤数据
- Angular JS 搜索过滤器不会使用 Firebase 过滤数据
- 如何在 Angular js 中根据严格匹配过滤数据
- JQuery - 使用不同输入的多个筛选器过滤数据属性
- 如何在angularjs中按日期范围过滤数据
- 如何在角度js中使用日期过滤数据
- 如何在Angular js中基于两个自定义过滤器过滤数据
- Asp.net MVC 3过滤数据然后传递到JSON中