javascript - Angular JS : Search with parameters defined by select

Question

所以我有一个搜索框，其中包含一些我想用来限制搜索的参数。在我的示例中，这包括名字和姓氏。

所以我一直在尝试这样实现它。这是下拉列表的代码。

<select id="usersearchby" ng-model="searchFilter" ng-change="selectAction()">
        <option>Search By ...</option>
        <option value="lastName">Last Name</option>
        <option value="firstName">First Name</option>
</select>

这是输入搜索字段的代码。

<input type="search" ng-if="searchFilter != 'firstName' && searchFilter != 'lastName'" ng-model="searchText">
<input type="search" ng-if="searchFilter == 'firstName'" ngModel="searchText.first_name">
<input type="search" ng-if="searchFilter == 'lastName'" ngModel="searchText.last_name">

这是显示结果的 div 的代码。

<div class="block_line_item userlist_expanded" ng-repeat="user in users | filter: searchText">

但是这段代码不起作用，如果我只有一个输入搜索框来输入 first_name(没有条件输入)，它就可以正常工作!我究竟做错了什么？有更好的方法吗？

我正在使用的 json 数据示例:

[{"role":"1","credentials":"","work_phone":"206–298–3059","last_name":"Doe","middle_name":"","suffix":"","title":"Mr.","mobile_phone":"1–877–932–4259","id":1,"fax":"135–678-6357","first_name":"John","email":"user1@gmail.com","username":"user1"},     {"role":"1","credentials":"","work_phone":"206–298–3059","last_name":"Doe","middle_name":"","suffix":"","title":"Mr.","mobile_phone":"1–877–932–4259","id":2,"fax":"135–678–6357","first_name":"Jane","email":"user22@gmail.com","username":"user2"}]

Answer 1

与其拥有三个文本框，不如拥有一个并在您的 Controller 中使用一个过滤器函数，它将被 ng-repeat 中的过滤器使用:

<input type="search" ng-model="searchText"/>

<div class="block_line_item userlist_expanded" ng-repeat="user in users | filter: filterUsers(searchText, searchFilter)">
        {{user.first_name + ' ' + user.last_name}}
</div>

$scope.filterUsers = function(searchText, searchFilter) {
    if (searchFilter === 'firstName') {
      return function (user) { return user.first_name.match(searchText); }
    }
    else if (searchFilter === 'lastName') {
      return function (user) { return user.last_name.match(searchText); }
    }
    else {
      return function (user) { return user.first_name.match(searchText) || user.last_name.match(searchText); }
    }
};

http://plnkr.co/edit/vYlBLiF555JLpwlnZIPR?p=preview