在两个不同的选项卡（AngularJS）中筛选

我有两个选项卡，必须在它们两个上实现筛选。在第二个标签中一切正常，但在第一个没有。我填补这一问题涉及到这部分（NG-模型）：在两个不同的选项卡（AngularJS）中筛选

<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

来源

2015-07-13 Johnny Juarez

做这个改变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>

这里是updatd Plunker

来源

2015-07-13 10:10:23

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

来源

2015-07-13 10:09:06

由于您使用search.district，它试图访问.district价值为城市。

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

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

...这里......

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

，然后重命名district到name对小区阵列的每个区。

来源

2015-07-13 10:18:53 franciscod

在两个不同的选项卡（AngularJS）中筛选

回答

相关问题