angular ng-repeat filter array by key

Question

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.

You're missing some pretty important contextual information: name1 thru name9 values and myFilter. — Mike Perrenoud
– Mike Perrenoud, Commented May 18, 2015 at 13:03
your filter is on the wrong ng-repeat. it should be on the element you want to filter, not the element you are choosing from. also, putting an ng-repeat on a ul causes unusual UI glitches, the repeat should be on the li instead. — Claies
– Claies, Commented May 18, 2015 at 13:08
$scope.allNames = { "A": [ { name: a1 }, { name: a2 }, { name: a3} ], "B": [ { name: b1 }, { name: b2 }, { name: b3} ], "C": [ { name: c1 }, { name: c2 }, { name: c3} ], } This is also wring values wire like [ { "name": "a1" }, { "name": "a2" }, { "name": "a3" } ] — vamsikrishnamannem
– vamsikrishnamannem, Commented May 18, 2015 at 13:17
Do you need to use filter? Can you not just select that specific array using the desired key. ng-click="chosenArray = allNames['A']" then loop through chosenArray to display it's values? — Akurn
– Akurn, Commented May 18, 2015 at 13:27

User2 · Accepted Answer · 2015-05-19 05:53:49Z

1

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>

edited May 19, 2015 at 5:53

answered May 18, 2015 at 14:04

User2

1,3038 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular ng-repeat filter array by key

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related