Угловой фильтр Удаляет HTML при фильтрации

Question

Я создал угловой фильтр, который фильтрует список контактов из объектов json на основе нажатой кнопки группы. Фильтр работает, однако, когда вы нажимаете кнопку группы, он удаляет html для кнопок, которые не являются текущей кнопкой группы.

Например, в plunkr ниже, если вы нажмете на персональный фильтр, он будет фильтровать для всех контактов w название группы «Личный», а затем удаляет все остальные групповые кнопки.

http://plnkr.co/edit/B3g075?p=preview

Может кто-то объяснить, почему угловой фильтр удаляет HTML? Это потому, что у меня есть групповые кнопки как ng-repeat?

$scope.groups = [ 
{ 
    name: "Personal", 
    contacts: [ 
     { 
     "firstName": "Person", 
     "lastName": "One", 
     "mobile": "519-555-5555", 
     "home": "519-999-9999", 
     "email": "person@example.com", 
     "company": "blah Incorporated" 
     } 
    ] 
    }, 
    { 
    name: "Family", 
    contacts: [ 
     { 
     "firstName": "Person", 
     "lastName": "Two", 
     "mobile": "519-555-5555", 
     "home": "519-999-9999", 
     "email": "person@example.com", 
     "company": "blah Incorporated" 
     } 
    ] 
    }, 

$scope.filter = function (name) { 
    console.log("group.name = " + name); 
    $scope.groups = $filter('filter')($scope.groups, {'name': name}); 
}; 


<div class="row"> 
<div class="col-md-3"> 
    <!-- Groups Section --> 
    <div class="group-list"> 
    <h4>All Contacts</h4> 
    <div class="list-group scrolls"> 
     <a href="javascript:void(0);" ng-model="all" ng-click="filter('All')" class="list-group-item btn-hover">All Contacts 
     <span class="onHover pull-right"><i class="fa fa-times"></i></span> 
     </a> 
     <a href="javascript:void(0);" ng-repeat="group in groups" ng-click="filter(group.name)"class="list-group-item btn-hover">{{group.name}} 
     <span ng-click="deleteGroup()" class="onHover pull-right"><i class="fa fa-times"></i></span> 
     </a> 
    </div> 
    <div class="group-list-bottom"> 
     <button class="btn btn-default"><i class="fa fa-plus"></i> New Group</button> 
    </div> 
    </div> 
</div> 

Answer 1

Вы используете $ scope.groups для заполнения как групповых кнопок, так и контактов. Поэтому, когда вы применяете свой фильтр, это влияет на обоих.

Разделите его на два отдельных массива, один для кнопок и один для контактов.