search - AngularJS sort People into Alphabetical List and Filter -

in angularjs have object keys letters of alphabet , each key array of people.

<div ng-repeat="(letter, group) in people"></div>     <div ng-repeat="people in letter"></div> </div> 

this create in html:

a. arnold, avery, adam, alex b. bob, boris c. chris, connor, caleb 

how go filtering each individual field name? example applying this.

<div ng-repeat="people in letter | filter:{'name':search.query}"> 

works fine, however, result when type "a" in:

a. arnold, avery, adam, alex b.  c. 

how can collapse b , c? there better organization method data?

the trick here store filtered names in scope variable can length check hide empty result.

you can following markup:

<div ng-repeat="people in filtered = (group | filter: search)"></div> 

then add ng-if="filtered.length > 0" tag want hide if result 0.

please have @ demo below or in jsfiddle.

angular.module('demoapp', [])  .controller('maincontroller', function($scope) {      $scope.peoples = {          a: ['arnold', 'avery', 'adam', 'alex'],          b: ['bob', 'boris'],          c: ['chris', 'connor', 'caleb']      };        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"></script>  <div ng-app="demoapp" ng-controller="maincontroller">      <input ng-model="search" placeholder="enter search string"></input>  <div ng-repeat="(letter, group) in peoples">      <strong ng-if="filtered.length > 0">{{letter}}</strong>      <div ng-repeat="people in filtered = (group | filter: search)">{{people}}</div>      <br ng-if="filtered.length > 0"/>  </div>  </div>