對嵌套條目和分組標頭進行過濾

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

通常你不會做任何事情，只是改變一下你的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

Answer 2

不知道是否具有相同的行爲，如你所願，但你可以做這樣的事情：

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

這樣一來，就展現出了組只有當：或者根本沒有過濾器正在申請，或者過濾器的第一個字符與組字母相同。