在两个不同的选项卡中过滤（AngularJS）答案

【问题标题】：Filtering in two different tabs (AngularJS)在两个不同的选项卡中过滤（AngularJS）
【发布时间】：2015-10-01 12:53:04
【问题描述】：

我有两个选项卡，必须对它们都实施过滤。在第二个选项卡中一切正常，但在第一个选项卡中没有。我正在填写与这部分有关的问题（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

【问题讨论】：

标签： javascript angularjs filter angular-ngmodel

【解决方案1】：

在 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

【讨论】：

【解决方案2】：

在您的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;
}

【讨论】：

【解决方案3】：

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

您可以在这里使用search.name...

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

...这里...

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

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

【讨论】：