javascript - 基于选择值和文本输入的 Angular 更改过滤器

Question

我是 Angular 的新手，所以我认为这是一个基本概念，我只是错过了一些步骤。我想要一个进行基本 Angular 过滤的搜索，但我想要一个单独的选择来选择文本输入搜索的内容。目前它看起来像这样:

搜索输入:

<input type="text" class="form-control" id="search-users" ng-model="userQuery">
      <span class="input-group-btn">
        <select ng-model="searchOn" ng-change="setSearchOn(searchOn)">
            <option value="CustomerId" selected>CustomerId</option>
            <option value="Username">Username</option>
        </select>
      </span>

功能:

$scope.setSearchOn = function(searchOnIn){
            console.log("setting searchOn to "+searchOnIn);
            $scope.searchOn = searchOnIn;
        }

中继器:

<div ng-repeat="user in users | filter:userQuery.searchOn">

我觉得我什至不需要这个功能，我不应该能够将选择的值数据绑定(bind)到中继器上的过滤器吗？我也无法让它发挥作用。如有帮助，将不胜感激。 Angular 很棒，但是开始学习它的工作方式有点困难:)

Answer 1

据我了解，我们希望通过下拉列表选择要搜索的属性，然后在 userQuery 输入中搜索该属性的值。

实现此目的的一种方法是(重新)构建一个对象，以便在 userQuery 或 searchOn 发生更改时进行过滤。

var app = angular.module('myapp', []).controller('ctrl', function($scope){
    /* some test data */
    $scope.users = [{CustomerId : 1, Username : 'Pete'},
                   {CustomerId : 2, Username : 'John'},
                   {CustomerId : 3, Username : 'Claus'}]

    $scope.setSearchFilter = function()
    {
        $scope.searchFilter = {};
        $scope.searchFilter[$scope.searchOn] = $scope.userQuery;
    }
})

在 html 中，我在 userQuery 和 searchOn 上设置了 ng-change 来更新搜索过滤器。

<div ng-controller="ctrl">
    <input type="text" class="form-control" id="search-users" ng-model="userQuery" ng-change="setSearchFilter()" />
    <span class="input-group-btn">
        <select ng-model="searchOn" ng-change="setSearchFilter()">
            <option value="CustomerId" selected>CustomerId</option>
            <option value="Username">Username</option>
        </select>
      </span>

      <div ng-repeat="user in users | filter:searchFilter">
          {{user.CustomerId}} -- {{user.Username}}
      </div>
</div>

http://jsfiddle.net/nwdx7/1/