Question

我是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">

我觉得我甚至不需要这个功能，难道我不能将select的值数据绑定到转发器上的过滤器吗？我也无法做到这一点。帮助将不胜感激。 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中，我在ng-change和userQuery都设置了searchOn来更新搜索过滤器。

<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/

角度更改过滤器基于选择值和文本输入

1 个答案: