Angular.js可过滤列表，通过选择字段和可点击地图预定义值

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

本文关键字：预定义 字段 地图 过滤 js 列表 Angular 选择      更新时间：2023-09-26

希望有人能帮我解决这个问题。基本上，我有一个结果列表，我必须能够通过一个选择字段进行筛选，该字段具有预定义的"区域"值，以及一个可点击的SVG地图（包含带有#region_values的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>

非常感谢！

从文本框中搜索和筛选。还有这个pulnkrhttp://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);
};

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

相关文章：