基于选择值angularjs过滤答案

【问题标题】：Filter based on select value angularjs基于选择值angularjs过滤
【发布时间】：2016-11-17 06:16:35
【问题描述】：

我想根据选定的值编写一个过滤器。例如，如果我选择名称选项，我可以使用“输入文本”搜索所有输入了相同名称的用户。是否可以使用类似的语法“filter:{serach:name}”。

<input type="text" data-ng-model="search" /> 
<select name="option">
  <option value="name">name</option>
  <option value="address">address</option>
  <option value="email">email</option>
</select>


        <table>
            <thead>
                <tr>
                    <th>name</th>
                    <th>address</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="user in usersList | filter:{option:search}">
                    <td><span data-ng-bind="user.name"></span></td>
                    <td><span data-ng-bind="user.address"></span></td>
                    <td><span data-ng-bind="user.email"></span></td>
                </tr>
            </tbody>
        </table>
    </div>
    </div>
</div>`

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

试试这样：

<tbody>
    <tr data-ng-repeat="user in usersList | filter:{name:user.name, address: user.address}">
        <td><span ng-model="user.name"></span></td>
        <td><span ng-model="user.address"></span></td>
    </tr>
</tbody>

【讨论】：

好的，但此搜索仅根据名称搜索用户。我想要根据姓名或电子邮件或地址进行更可扩展的搜索
只需将其他属性添加到过滤器。更新了我的答案
谢谢马克西姆斯。这是一个很好的解决方案，但我必须写 3 个输入（姓名、地址和电子邮件）。在我的示例中，我想用 select 编写一个输入文本，在这种情况下可以吗？
你想在 html 中输入一个吗？

【解决方案2】：

也许创建一个自定义过滤器，接受您的选择选项值作为参数和项目数组，以便您可以按该选项和文本输入上的值进行过滤。对于你需要的东西可能有点过火了。

我的糟糕例子：

app.controller("CurrencyController", function ($scope, $http, $filter) {
    $scope.option = '';//select value
    $scope.search = '';//input text
    $scope.usersList = [
        {'name':'luis', 'id':3, 'address':'somewhere 1'},
        {'name':'charles', 'id':4, 'address':'somewhere 2'},
        {'name':'john', 'id':5, 'address':'somewhere 1'},
        {'name':'mike', 'id':6, 'address':'somewhere 3'}
    ];

    $scope.filterOut = function(){
//create a copy of usersList to keep original if no value for filter
        $scope.usersListCopy = angular.copy($scope.usersList);
        $scope.usersListCopy = $filter('aFilter')($scope.usersListCopy, $scope.search, $scope.option);
    };

}).
filter('aFilter', function() {
    return function(input, searchingFor, searchOnField) {
        if ( searchOnField == '' || searchingFor == '' ) {
            return input;
        } else {
            var returnItems = [];

            for (var a = 0; a < input.length; a++){
                //cycle thru every item key
                if(input[a][searchOnField] == searchingFor){
                    returnItems.push(input[a]);
                }

            }
            console.log(returnItems);
            return returnItems;
        }
    };
});

在我的 html 中，我只是在表格行上迭代 usersListCopy。并在开始时使用 ng-init 调用 filterOut，以便在 usersListCopy 上有数据。同时设置 ng-change="filterOut();"在元素上。

【讨论】：