Question

我创建了一个角度过滤器，可根据单击的组按钮过滤json对象的联系人列表。但是，当您单击组按钮时，过滤器可以删除不是当前正在过滤的组按钮的按钮的html。

例如，在下面的plunkr中，如果您单击个人，则会过滤所有联系人，组名称为“个人”，但随后会删除所有其他组按钮。

有人可以解释为什么角度过滤器会删除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填充组按钮和联系人。因此，当您应用过滤器时，它对两者都有影响。

在两个单独的数组中分解，一个用于按钮，另一个用于联系人。

角度过滤器在过滤时删除HTML

1 个答案: