Angular.js通過選擇字段和可點擊的地圖預定義值的可篩選列表

Question

希望有人能幫助我解決這個問題。基本上我有一個結果列表，我必須能夠通過選擇字段進行過濾，具有預定義的「區域」值，以及可點擊的SVG地圖（包含帶有＃地區值的A標記），地圖&上的值選擇字段將是一樣的。一直瀏覽網頁幾個小時，沒有發現任何有用的東西。

我該如何將兩個表單連接到同一個列表作爲過濾器？

這裏是清單發生器（正常工作）：

<div class="results" id="goto" ng-controller="listCtrl"> 
    <input type="text" ng-model="filterText" /> 
    <div class="list"> 
     <div class="item" ng-repeat="item in items"> 
      <div class="columns image"> 
       <img src="images/misc/{{ item.image }}" alt="{{ item.name }}"> 
       <a target="_blank" class="button green-button" href="{{ item.url }}">{{ item.button }}</a> 
      </div> 
      <div class="columns copy"> 
       <div class="result"><span class="place">{{ $index+1 }}</span>{{ item.vote }} de los votos</div> 
       <h2>{{ item.name }}</h2> 
       <p>{{ item.desc }}</p> 
       <p>{{ item.region }}</p> 
      </div> 
     </div> 
    </div> 
</div> 

這裏是控制器：

function listCtrl($scope) { 

    $scope.items = [{ 
      "name": "City Name", 
      "desc": "City Description", 
      "vote": "56,4%", 
      "image": 'image.jpg', 
      "url": 'http://sample.url', 
      "button": "Button Text", 
      "region": "Some Region" 
     } 
    ]; 
} 

地圖是這樣的：

<svg> 
    <g> 
     <a id="s40" xlink:href="#region1"> 
      <path> ...</path> 
     </a> 
     <a id="s40" xlink:href="#region2"> 
      <path> ...</path> 
     </a> 
    </g> 
</svg> 

和選擇：

<select> 
    <option value="region1">Region1</option> 
    <option value="region2">Region2</option> 
</select> 

非常感謝！

Answer 1

這實際上是通過增加解決NG點擊=「catFilter = 'regionname' 「到我想要控制所需區域na的選擇字段的鏈接我。

Answer 2

從文本框中搜索和過濾。這pulnkr http://plnkr.co/edit/EjzcOG?p=preview將有助於

HTML

<label> 
Search Text: <input ng-model="val" ng-keyup="search(val)" ng-keydown="search(val)"> 
</label><br> 
<div data-ng-repeat="customer in displayCustomers"> 
<span>{{customer}}</span> 

腳本

$scope.customers = ['bob', 'sean', 'rocky', 'john', 'ali', 'isak', 'isthiqui', 'ram', 'acheer', 'shrish']; 

$scope.displayCustomers = $scope.customers; 

$scope.search = function (searchTerm) { 
      $scope.displayCustomers = $filter('filter')($scope.customers, searchTerm); 
};