通过选择字段和可点击地图Angular.js以predefined值过滤列表 [英] Angular.js filterable list with predefined values by a select field and a clickable map

问题描述

希望有人可以帮助我与此有关。基本上，林其结果AA名单，我必须能够通过选择字段来过滤，用pdefined'区域'的价值观，和一个可点击的SVG地图$ P $（包含#region_values​​一个标签）地图和功放上，值;选择字段将是相同的。被浏览了几个小时的网，没有发现任何有用的。

Hope someone could help me out with this. Basically Im having a a list of results, that I have to be able to filter by a Select field, with predefined 'region' values, AND a clickable SVG map (contains A tags with #region_values), values on the map & the Select field will be the same. Been browsing the web for hours, without finding anything useful.

我怎样才能既重视对同一列表作为过滤器？

How can I attach both for the same list as a filter?

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

Here is the list generator (working properly):

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

在这里是控制器：

here is the controller :

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>

非常感谢！

推荐答案

这实际上是通过添加解决NG-点击=catFilter ='regionname'的链接，我想与所需的区域名称来控制选择字段。

This is actually solved by adding ng-click="catFilter='regionname'" to the links that I wanted to control the select field with the desired region name.

这篇关于通过选择字段和可点击地图Angular.js以predefined值过滤列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！