错误过滤通过 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 开头但确实包含包含字母 [= 的城市的地区=13=].

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

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 以包含第二个蓝色列表，它是这样搜索的。

错误过滤通过 ng-repeat 创建的列表 (AngularJS)

Incorrect filtering the list created via ng-repeat (AngularJS)

filtering

angularjs

ng-repeat

angularjs-ng-repeat