Question

如果到目前为止有以下设置。

HTML

<div ng-app="myApp">
    <div id="personList" ng-controller="MainCtrl">
            <div class="gwsSearchItemInput" >Suchen: <input ng-model="searchText" /></div>
            <a name="top"></a>
            <div style="display: inline;" ng-repeat='group in getGroups()'>
                <h2 style="display: inline;"><a href="#letter{{group}}">{{group}}</a></h2>
            </div>
            <div ng-repeat='group in getGroups()'>
                <h2><a name="letter{{group}}">{{group}}</a></h2>
                <ul>
                    <li ng-repeat="person in persons | groupby:group | orderBy: 'DisplayName' | filter:searchText" class="employeebox">
                        <p>{{ person.DisplayName }}</p>
                        <p>{{ person.department }}</p>
                    </li>
                </ul>
                <a href="#top">top</a>
            </div>      
    </div>          
</div>

JS

var myApp = angular.module('myApp', []);
console.log("hello");
myApp.filter('groupby', function () {
    return function (items, group) {
        return items.filter(function (element, index, array) {
            return element.GroupByFieldName == group;
        });
    }
})

myApp.controller('MainCtrl', ['$scope','$filter', function ($scope, $filter) {

    $scope.persons = [{
        'GroupByFieldName': 'M',
        'DisplayName': 'Meier, Hans',
        'department': 'Department 1'
    }, {
        'GroupByFieldName': 'S',
        'DisplayName': 'Schmidt, Thomas',
        'department': 'Department 1'
    }, {
        'GroupByFieldName': 'S',
        'DisplayName': 'Smith, John',
        'department': 'Department 2'
    }, {
        'GroupByFieldName': 'J',
        'DisplayName': 'Johnson, Steve',
        'department': 'Department 1'
    }];

    $scope.getGroups = function () {
        var groupArray = [];
        //filter = $filter('searchText');
        //console.log("filter: " + $filter.searchText);
        //$scope.persons = $filter('filter')($scope.persons, {DisplayName:$filter.searchText});
        angular.forEach($scope.persons, function (item, idx) {
            if (groupArray.indexOf(item.GroupByFieldName) == -1)
                groupArray.push(item.GroupByFieldName)
        });
        return groupArray.sort();
    }
}]);

http://plnkr.co/edit/N26eopH210mTgA1nzGn8

我希望能够过滤，例如'Meier'之后只看到'M'组。现在只有组内的人员受到过滤器的影响。有可能这样做吗？

Answer 1

不确定它是否具有您想要的相同行为，但您可以执行以下操作：

<div ng-repeat='group in getGroups()'>
  <div class="wrapper" data-ng-show="!searchText || searchText.charAt(0) == group">
    <h2><a name="letter{{group}}">{{group}}</a></h2>
    <ul>
      <li ng-repeat="person in persons | groupby:group | orderBy: 'DisplayName' | filter:searchText" class="employeebox">
        <p>{{ person.DisplayName }}</p>
        <p>{{ person.department }}</p>
      </li>
    </ul>
    <a href="#top">top</a>
</div>

这样，您只在以下情况下显示该组：或者根本没有应用过滤器，或者过滤器的第一个字符与组字母相同。

Answer 2

一般来说，除了改变getGroups方法之外，你什么都不做。

$scope.searchText = '';

$scope.getGroups = function () {
        var groupArray = [];
        angular.forEach($scope.persons, function (item, idx) {
            if (groupArray.indexOf(item.GroupByFieldName) == -1 &&
                item.DisplayName.indexOf($scope.searchText) !== -1)
                groupArray.push(item.GroupByFieldName)
        });
        return groupArray.sort();
    }

在我们输入的任何文字上，我们更改了getGroups()

的输出

演示 Plunker

过滤嵌套条目和分组标题

2 个答案: