Reputation: 1305
I have the following data:
$scope.allNames = [
"A": [ { "name": "a1" }, { "name": "a2" }, { "name": "a3"} ],
"B": [ { "name": "b1" }, { "name": "b2" }, { "name": "b3"} ],
"C": [ { "name": "c1" }, { "name": "c2" }, { "name": "c3"} ],
]
<div ng-repeat="(letter, names) in allNames | filter:myFilter">
<h4>{{ letter }}</h4>
<ul ng-repeat="n in names">
<li>{{ n.name }}</li>
</ul>
</div>
// on click show only name for this letter.
<span ng-click="myFilter = ??">A</span>
<span ng-click="myFilter = ??">B</span>
<span ng-click="myFilter = ??">C</span>
What I'm trying to do is on click of <span>A</span>
show only names that have $key: A
in allNames
variable or that start with A. This is where I get stuck on how to filter by index of array.
Upvotes: 2
Views: 1379
Reputation: 1293
Check this it might be your solution - http://jsfiddle.net/Shital_D/vsvxqnq7/4/
After clicking on A, B, C respective array is displayed.
Here is the code:
angular.module('myApp', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myFilter = '';
$scope.allNames = {
"A": ['name1', 'name2', 'name3'],
"B": ['name4', 'name5', 'name6'],
"C": ['name7', 'name8', 'name9']
};
$scope.change = function(key) {
$scope.myFilter = key;
};
}]);
HTML -
<div ng-repeat="(key, value) in allNames" ng-show="myFilter == key">
<h4>{{ key }}</h4>
<ul ng-repeat="name in value">
<li>{{ name }}</li>
</ul>
</div>
<div ng-repeat="(key, value) in allNames" ng-click="change(key)">
{{key}}
</div>
Upvotes: 1