ng-repeat variable scope to the DOM block

Question

Am I dreaming or I really saw that somewhere, but I can't remember the exact syntax. So if I have

var fooObjects = [{ name:"John", age:15 }, 
                  { name: "Michael", age:26 }, 
                  ...etc...]

and

<div ng-repeat="for foo in fooObjects">     <-- note, this isn't real syntax
   {{name}}              <-- Now you don't have to explicitly call `foo.name`
   {{age}}                                          inside of this div block
</div>

I think you mix that up with controller scopes. Maybe this will help you: http://stackoverflow.com/questions/15623698/directive-isolate-scope-with-ng-repeat-scope — Alp, Jun 10 '14 at 17:06

pje · Accepted Answer · 2014-06-24T16:31:43.537

An example from https://docs.angularjs.org/api/ng/directive/ngRepeat. Try something like this:

  <div ng-init="friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'Samantha', age:60, gender:'girl'}
  ]">
    <ul>
      <li ng-repeat="friend in friends">
        {{friend.name}} who is {{friend.age}} years old.
      </li>
    </ul>
  </div>

Here's a plunker with the example http://plnkr.co/edit/I19oBk20T5ldLZe7GYqN?p=preview

--edit--

I misunderstood your earlier question. You could go about aliasing the variable in the ng-repeat by implementing the following in your controller:

$scope.scopify(scope, object) {
  for (var o in object) {
    scope[o] = object[o];
  }
}

Used like the following:

<li ng-repeat="friend in friends" ng-init="scopify(this, friend)">  
  {{name}}, {{age}}, {{gender}}
</li>

Here is a plunker with a working example: http://plnkr.co/edit/Y8c4uOagcdM5cXN81TET?p=preview

In addition to the above example, you can create aliases for any of the properties of an object through the ng-init directive. For example, another possible solution could be this:

<li ng-repeat="friend in friends" 
    ng-init="name = friend.name; age = friend.age; gender = friend.gender">
  {{name}}, {{age}}, {{gender}}
</li>

We can use ng-init to create aliases that we can reference in that html block. While this is not very useful if you are only going to reference each property once, it might come in handy if you have to repeat the same property multiple times within a block of html.

You don't get it, don't you? I know how to use `ng-repeat`. The question is - how can you drop `friend` inside the ng-repeat block? Isn't it obvious that `name` and `age` belong to `friend`? Why repeating it every time? — iLemming, Jun 10 '14 at 17:41
@Agzam I misunderstood your question at first, I updated my answer :-) See my **--edit--** — pje, Jun 27 '14 at 14:55

ng-repeat variable scope to the DOM block

1 Answers1