Angularjs ng-repeat: iterate over a special object fields

Question

I have an object:

var options = {
    NAME_1 : "Name 1",
    TEXT_1 : "Description goes here",
    NAME_2 : "Name 2",
    TEXT_2 : "Description2 goes here",
};

Is it possible to iterate over the fields of the object inside the ng-repeat? E.g.

<div ng-repeat="item in options">
    <span class="title">{{item.name}}</span>
    <span class="text">{{item.text}}</span>
</div>

I will greatly appreciate any advice.

Thanks in advance.

possible duplicate of [How can i iterate over the keys , value in ng-repeat in angular](http://stackoverflow.com/questions/15127834/how-can-i-iterate-over-the-keys-value-in-ng-repeat-in-angular) — Maxime Lorant, Jul 17 '14 at 09:22

score 7 · Answer 1 · answered May 09 '14 at 21:47

7

Absolutely! Use the following syntax:

<div ng-repeat="(k, v) in options">

As you can guess, k is the key and v is the value of the key.

answered May 09 '14 at 21:47

tymeJV

103,943
14
161
157

You can use any valid identifiers you like, of course, not just "k" and "v". – Andrew Swan Sep 09 '15 at 06:33

z.a. · Accepted Answer · 2014-05-09T23:26:44.797

this is not going to work as you imagine, perhaps your object can look like this,

var options = [
{
name : "Name 1",
text : "Description goes here"
},
{
name : "Name 2",
text : "Description2 goes here"
}
];

now you can iterate just as you want it.

Or, you can I guess iterate over all your values in the object but you need to keep in mind that these values are not really related to each other, besides just being in the same object.

This is the solution with ng-if and iterate over the object. But as I mentioned, javascript iterates over objects not in order so your best bet to reorder your properties in an array and then iterate again. This below iterate as NAME_1, NAME_2, TEXT_1, TEXT_2

app.controller('MainCtrl', function($scope) {
  var options = {
    NAME_1 : "Name 1",
    TEXT_1 : "Description goes here",
    NAME_2 : "Name 2",
    TEXT_2 : "Description2 goes here",
};
$scope.options = options;
$scope.check = function(title, key) {
   if(key.split('_')[0] === title) {
     return true;
   } 
}
});

<div ng-repeat="(k,v) in options|orderBy:k">
    <span ng-class="title" ng-if="check('NAME',k)">{{k}}</span>
    <span ng-class="text" ng-if="check('TEXT',k)">{{k}}</span>     
</div>

COMPLETE SOLUTION: If you also use underscore, you can do this.

<div ng-repeat="x in optionsArray">
      <span ng-class="title" ng-if="check('NAME',x)">{{x[1]}}</span>
      <span ng-class="text" ng-if="check('TEXT',x)">{{x[1]}}</span>
</div>

app.controller('MainCtrl', function($scope) {
  var options = {
    NAME_1: "Name 1",
    TEXT_1: "Description goes here",
    NAME_2: "Name 2",
    TEXT_2: "Description2 goes here",
  };
  $scope.options = options;
  $scope.optionsArray = _.pairs(options);
  $scope.check = function(title, key) {
    if (key[0].split('_')[0] === title) {
      return true;
    }
  }

});

I cannot modify the object. This is how it is returned by a 3-d party service. I was thinking about combining ng-if and using "odd" parameter inside the cycle. — Sray, May 09 '14 at 22:16
that wouldn't work because javascript iterates over object properties in not an orderly fashion. I edited my answer though for also what you were asking. So you can kinda work on that. — z.a., May 09 '14 at 23:02

Angularjs ng-repeat: iterate over a special object fields

2 Answers2