Angular ng-repeat array

Question

I'm using Angular v1.4.0-beta.4 and need to iterate an array inside a scope like that:

$scope.users = {
   name:'PC Admin',
   login:[
      {
         proto:'https',
         user:'admin',
         pass:'foobar'
      },
      {
         proto:'ssh',
         user:'root',
         pass:'strang3'
      }
   ],
   ip:'192.168.1.2'
}

I have looked at Angular ng-repeat docs but can't figure it out. I tried many things the last was like that (html):

<ul>
<li ng-repeat="user in users.login track by $index">
<li>Usuario: {{user.login[$index].user}}<br></li>
<li>Clave: {{user.login[$index].pass}}<br></li>
</ul>

But can't show anything. If I show user.login[0].user or user.login[1].pass it shows ok, but how to iterate to show every data in the array? Thanks in advance!

What is the resultant html that you are looking for? Your code is nesting li inside of li and the outer li is not closed. This structure doesn't make sense. — Crowcoder
– Crowcoder, Commented Mar 5, 2015 at 12:50

kasoban · Accepted Answer · 2015-03-05 13:13:23Z

0

You are mixing two things here. Your current item is available as 'user', yet you try to access the outer array by index.

You either have to use

<ul ng-repeat="user in users.login track by $index">
<li>Usuario: {{user.user}}<br></li>
<li>Clave: {{user.pass}}<br></li>
</ul>

or

<ul ng-repeat="user in users.login track by $index">
<li>Usuario: {{users.login[$index].user}}<br></li>
<li>Clave: {{users.login[$index].pass}}<br></li>
</ul>

but the second way would rather be a misuse of the ng-repeat directive IMHO.

edited Mar 5, 2015 at 13:13

answered Mar 5, 2015 at 12:42

kasoban

2,17717 silver badges25 bronze badges

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

1 Comment

Guillermo Rodriguez Over a year ago

Thanks kasoban & Sphaso, as you could see I'm new at Angular, yesterday I spent many hours to figure it, THANKS! Both solved my issue

user1334319 · Accepted Answer · 2015-03-05 12:42:22Z

0

This should do the trick:

<ul>
<li ng-repeat="user in users.login track by $index">
<li>Usuario: {{user.user}}<br></li>
<li>Clave: {{user.pass}}<br></li>
</ul>

answered Mar 5, 2015 at 12:42

user1334319

Comments

Guillermo Rodriguez · Accepted Answer · 2015-03-05 14:18:43Z

0

Thanks kasoban & Sphaso, as you could see I'm new at Angular, yesterday I spent many hours to figure it, THANKS! Both solved my issue

<ul>
<li ng-repeat="user in users.login track by $index">
<li>Usuario: {{user.user}}<br></li>
<li>Clave: {{user.pass}}<br></li>
</ul>

edited Mar 5, 2015 at 14:18

answered Mar 5, 2015 at 13:29

Guillermo Rodriguez

32 bronze badges

Collectives™ on Stack Overflow

Angular ng-repeat array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related