Seeking assistance on a filtering issue I am facing. I have a list of results that need to be filterable by both a Select field, with predefined 'region' values, and a clickable SVG map with A tags linking to #region_values. The values on the map and in the Select field will match. Despite hours of searching online, I haven't found a solution.
How can I set up both as filters for the same list?
Below is the functioning list generator:
<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"
}
];
}
Map markup:
<svg>
<g>
<a id="s40" xlink:href="#region1">
<path> ...</path>
</a>
<a id="s40" xlink:href="#region2">
<path> ...</path>
</a>
</g>
</svg>
Select field code:
<select>
<option value="region1">Region1</option>
<option value="region2">Region2</option>
</select>
Your help is much appreciated!