使用AngularJS动态地将过滤器添加到表中的特定选定属性

时间:2016-01-05 13:50:41

标签: angularjs filter angularjs-ng-repeat angular-filters

我有两个下拉菜单,一个用于'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>

enter image description here  我正在实现此功能。需要帮助?

0 个答案:

没有答案