AngularJS Filter只按值属性而不是html元素的文本执行搜索？

Question

我试图理解angularJS过滤器的机制，并尝试扩展其最初的功能。目前据我所知，当您执行过滤时，它将在每个html元素上搜索value属性来匹配。这在大多数情况下都很有效。这个问题的症结在于下拉列表。如果您将选项的文本设置为< code>Hello world并且value = 1，则搜索将查看< code >的value属性

<div ng-app="CategoryFieldApproversApp">

Search:<input id="txtSearch" ng-model="search" type="text" placeholder="Search" />

@using (Html.BeginForm("CategoryFieldApprovers", "Maintenance", FormMethod.Post))
{
    <div ng-controller="CategoryFieldApproversCtrl">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th width="1%"></th>
                    <th ng-click="sort('Name')" width="200">Category Field</th>
                    <th ng-click="sort('Name')" width="150">Approver</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr dir-paginate="categoryFieldApprover in categoryFieldApprovers|orderBy:sortKey:reverse|itemsPerPage:5" ng-show="ddlVisibility(categoryFieldApprover)">
                    <td>
                        <input type="hidden" name="CategoryFieldApprovers[{{$index}}].CategoryFieldApproverID" ng-model="categoryFieldApprover.CategoryFieldApproverID" value="{{categoryFieldApprover.CategoryFieldApproverID}}" />
                        <input type="hidden" id="hdnIsDirty" name="CategoryFieldApprovers[{{$index}}].IsDirty" value="{{categoryFieldApprover.IsDirty}}" />
                    </td>
                    <td>
                        <input class="hdnCategoryFieldID" type="hidden" name="CategoryFieldApprovers[{{$index}}].CategoryFieldID" value="{{categoryFieldApprover.CategoryFieldID}}" />
                        <select ng-model="categoryFieldApprover.CategoryFieldID" ng-options="categoryField.CategoryFieldID as categoryField.Name for categoryField in categoryFields | filter:{Name :search}"></select>
                    </td>
                    <td>
                        <input class="hdnApproverOneUserID" type="hidden" name="CategoryFieldApprovers[{{$index}}].ApproverOneUserID" value="{{categoryFieldApprover.ApproverOneUserID}}" />
                        <select ng-model="categoryFieldApprover.ApproverOneUserID" ng-options="user.UserID as user.DisplayName for user in users | filter:{DisplayName :search}"></select>
                    </td>
                    <td>
                        <input type="button" ng-click="remove($index)" ng-show="categoryFieldApprover.ShowRemove" value="Remove" />
                    </td>
                </tr>
            </tbody>
        </table>
        <dir-pagination-controls max-size="5"
                                 direction-links="true"
                                 boundary-links="true">
        </dir-pagination-controls>
        <br />
        <a class="btn btn-default" ng-click="add()">Add Field Approver</a>
        <input class="btn-primary btn-sm" ng-click="save()" type="button" value="Save" />
    </div>
}
</div>

<script>
var App = angular.module('CategoryFieldApproversApp', ['angularUtils.directives.dirPagination']).controller('CategoryFieldApproversCtrl', function ($scope, $http) {

    $http.get("@Url.Action("GetCategoryFieldApprovers", "Maintenance")").success(function (response) {
        $scope.categoryFieldApprovers = response;  //ajax request to fetch data into $scope.data
    });

    $http.get("@Url.Action("GetCategoryFields", "Maintenance")").success(function (response) {
        $scope.categoryFields = response;  //ajax request to fetch data into $scope.data
    });

    $http.get("@Url.Action("GetUsers", "Maintenance")").success(function (response) {
        $scope.users = response;  //ajax request to fetch data into $scope.data
    });

    $scope.sort = function (keyname) {
        $scope.sortKey = keyname;   //set the sortKey to the param passed
        $scope.reverse = !$scope.reverse; //if true make it false and vice versa
    }

    $scope.remove = function (index) {
        $scope.categoryFieldApprovers.splice(index, 1);
    };

    $scope.add = function () {
        $scope.categoryFieldApprovers.splice(0, 0, {
            CategoryFieldApproverID: 0,
            CategoryFieldID: 0,
            ApproverOneUserID: 0,
            ApproverTwoUserID: 0,
            ShowRemove: true
        });
    };

    $scope.save = function () {
        $('tbody tr').find('.ng-dirty').each(function (i, dirtyElement) {
            $(dirtyElement).closest('tr').find('#hdnIsDirty').val(true);
        });

        $('form').submit();
    };

    $scope.ddlVisibility = function (categoryFieldApprover) {

        if ($('#txtSearch').val() != "" && (categoryFieldApprover.CategoryFieldID == null && categoryFieldApprover.ApproverOneUserID == null)) {
            return false;
        }
        else {
            return true;
        }
    }
});

</script>

更新：从tr元素中删除了|filter： search。然后为每个下拉列表添加了filter：{Name： search}。它现在将正确过滤和显示/隐藏那些通过检查的行。现在唯一剩下的问题是，当过滤器函数执行时，如果下拉列表所选项目未通过测试，它会将所选索引设置为0，即空白项目。我如何防止它仅仅因为未能从过滤器中包含而更改选择？

Answer 1

请在这里看这个小演示。如果你正在寻找相同的功能，那么你只需要指定你想搜索的过滤器内的属性。

过滤器：{名称：搜索}

例如

<select ng-model="categoryFieldApprover.CategoryFieldID" ng-options="categoryField.CategoryFieldID as categoryField.Name for categoryField in categoryFields | filter:{Name :search}"></select>