我有两个下拉菜单,一个用于'id','name'等字段,一个用于过滤器,如'uppercase','contains','endWith'等。过滤器值是自定义过滤器名称写在angularjs.I有一个搜索文本框,用户在其中键入所选字段和属性的搜索项。
<div>
<label>Filter</label>
<select ng-model="selectedFilter">
<option value="uppercase">Uppercase</option>
<option value="startsWithLetter">Starts With</option>
</select>
</div>
<div>
<label>Fields</label>
<select ng-model="selectedField">
<option value="Id">Id</option>
<option value="name">startsWithLetter</option>
</select>
</div>
<input type="text" ng-model="search"/>
现在我写了一个像这样的
来解决过滤器的一般实现app.filter('picker', function ($filter) {
return function (value, filterName) {
return $filter(filterName)(value);
};
});
和这样的自定义过滤器很少
app.filter('startsWithLetter', function () {
return function (items, letter) {
var filtered = [];
var letterMatch = new RegExp(letter, 'i');
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (letterMatch.test(item.name.substring(0,1))) {
filtered.push(item);
}
}
return filtered;
};
});
这是$ scope模型
$scope.friends = [
{
id: 1,
name: 'Andrew'
},
{
id: 2,
name: 'Will'
},
{
id: 3,
name: 'Mark'
},
{
id: 4,
name: 'Alice'
},
{
id: 5,
name: 'Todd'
}];
我正在努力使用语法来写入ng-repeat,以便过滤器仅应用于所选的属性以及具有该搜索词的所选过滤器。如果没有选择,则表格将显示常规数据。
<ul>
<li ng-repeat="friend in friends | filter:{syntax }">
{{ friend.id}} , {{ friend.name }}
</li>
</ul>