Angular.js 具有预定义值的可过滤列表 select 字段和可点击的地图

Question

希望有人能帮我解决这个问题。基本上我有一个结果列表，我必须能够通过 Select 字段进行过滤，具有预定义的 'region' 值，以及可点击的 SVG 地图（包含带有 #region_values 的标签)，地图上的值和 Select 字段将相同。已经浏览了几个小时的网页，但没有找到任何有用的东西。

如何将两者附加到同一个列表作为过滤器？

这是列表生成器（正常工作）：

<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 :

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

非常感谢！

Answer 1

正在从文本框中搜索和过滤。这个 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>

Script

$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);
};

Answer 2

这实际上是通过将ng-click="catFilter='regionname'"添加到我想用所需区域名称控制select字段的链接来解决的。

Angular.js 具有预定义值的可过滤列表 select 字段和可点击的地图

Angular.js filterable list with predefined values by a select field and a clickable map

javascript

select

filtering

list

angularjs