过滤通过 ng-repeat (AngularJS) 创建的列表不正确

Question

我有一个包含地区的数组和包含每个城市的数组。我已经通过 bg-repeat 创建了列表：

 <div ng-repeat="district in districts | filter:search:startsWith" class="district">

      <h4 class="district-name">{{ district.district }}</h4>
      <a href="{{ district.link }}">Some info</a>

      <ul class="district-cities">

        <li ng-repeat="city in district.cities">
          {{ city }}
        </li>

      </ul>


    </div>

当我们点击区域开始的字母时一切正常，但是当我们点击某个字母时，那不是地区的第一个字母，但同时它存在于一个城市中，那么过滤工作不正确。

这里正在工作Plnkr。当您尝试单击字母A, B or G 时，一切都很好，但是一旦您单击字母Z，就会出现两个不是以字母Z 开头的地区，而是包含包含字母Z 的城市。

抱歉，这可能是一个基本问题，但是如何解决这个问题？

Answer 1

试试这个：

    <input id="q" type="text" ng-model="search.district " />

和

<ul search-list=".letter" model="search.district">
    <li class="letter" ng-repeat="letter in alphabet.letter">{{ letter }}</li>
</ul>

这意味着过滤器仅作用于您对象的区域属性。否则 Angular 会查看所有属性。

更新：

对于您的第二个列表，您需要使用 search.district 作为主要搜索项，如下所示：

<div ng-repeat="district in districts | filter:search.district:startsWith" class="district">

我更新了 Plunk 以包含第二个蓝色列表，像这样搜索。