在两个不同的选项卡中过滤 (AngularJS)

Question

我有两个选项卡，必须对它们都进行过滤。在第二个选项卡中，一切正常，但在第一个选项卡中却没有。我正在填写与这部分（ng-model）相关的问题：

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

对此：

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

所以第二个选项卡工作正常：

<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 ">
            <a href="{{ city.url }}">
                  {{ city.name }}
                </a>
        </li>
    </ul>
</div>

但是我不知道如何制作第一部分...

这里是DEMO

Answer 1

在您的 startsWith 方法中，您具体引用了对象的 district 属性。此属性在城市对象上不存在：

$scope.startsWith = function (actual, expected) {
  var lowerStr = (actual + "").toLowerCase();
  var e = angular.isString(expected) ? expected.toLowerCase() :
                                       // district is not present in City object
                                       expected.district.toLowerCase();
  return lowerStr.indexOf(e) === 0;
}

Answer 2

在 HTML

中进行此更改

<div class="tab-content active" data-id="first">
     <li ng-repeat='city in cities | filter:{name :search.district}:startsWith'>
            <a href="{{ city.link }}">
              {{ city.name }}
            </a>
     </li>
</div>

这是更新Plunker

Answer 3

由于您正在使用 search.district，它会尝试访问城市的 .district 值。

您可以使用 search.name 代替，这里...

<ul search-list=".letter" model="search.name">

...这里...

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

然后在分区数组的每个分区上将district重命名为name。

在两个不同的选项卡中过滤 (AngularJS)

Filtering in two different tabs (AngularJS)

javascript

filter

angularjs

angular-ngmodel