Angular.js ng-repeat with conditional

Question

I'm using ng-repeat to iterate over a key/value array. If the key == 'First Name' I would like to bind it to firstName. I'm new to angular.js, there may be a better way to do this? Basically I have a key/value array and some of the key's in it I would like to do something with.

<ul id="customers" infinite-scroll='loadMoreUsers()'>
        <li ng-repeat="user in users" data-customer-id="{{user.Id}}">

               <h4>{{user.firstName}} {{user.lastName}}</h4>

            <div ng-repeat="(key, value) in user.AttributeBag">
                <span ng-if="key == 'First Name'">{{user.firstName = value}}</span>
                <span ng-if="key == 'Last Name'">{{user.lastName = value}}</span></span>

                <span ng-if="key != 'First Name' && key != 'Last Name'">{{key}} : {{value}}</span>
            </div>
        </li>
    </ul>

Yes, you can see in the code where I check the key and try to bind the value to firstName; with no success... — Mark
– Mark, Commented Dec 16, 2015 at 17:34
Could you please post your data structure for 'users'? Then we can help find the best way to resolve your problem with ng-repeat.:-) — Anke Wenz
– Anke Wenz, Commented Dec 16, 2015 at 17:41
I think it should be {{user.firstName}} and so on, but it's better if you post the users JSON too — michelem
– michelem, Commented Dec 16, 2015 at 17:47

Danny · Accepted Answer · 2015-12-16 18:00:43Z

1

ng-if creates it's own child scope which is why you can't access the key

Two approaches I can think of

Use ng-show instead of ng-if. ng-show does not create it's own scope.
Use $parent to access the parent scope. However you are using an abstraction of the user.AttributeBag in your ng-repeat so this will need some tweaking.

answered Dec 16, 2015 at 18:00

Danny

6343 silver badges11 bronze badges

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

3 Comments

Mark Over a year ago

The above (edited) code is now working. Only problem left is it's still writing First Name and Last Name inside the ng-repeat of AttributeBag, which I don't want.

Anke Wenz Over a year ago

Do I understand right, that you want to bind the values, but not print them out? If this is the case, you can hide the print out with ng -hide

Mark Over a year ago

Anke, ng-hide does do the trick, as far as not showing it. But it's weird, why does is even write, when all I see it doing is setting user.firstName = value.

danday74 · Accepted Answer · 2015-12-16 18:01:25Z

1

source : http://www.w3schools.com/js/js_arrays.asp

JavaScript does not support arrays with named indexes. In JavaScript, arrays always use numbered indexes. WARNING !! If you use a named index, JavaScript will redefine the array to a standard object. After that, all array methods and properties will produce incorrect results.

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined

possibly what your are doing is conceptually wrong and you need to use an array of objects?

answered Dec 16, 2015 at 18:01

danday74

58.1k56 gold badges273 silver badges337 bronze badges

1 Comment

Mark Over a year ago

AttributeBag is an array of key / values, like 'First Name' : Steve

Collectives™ on Stack Overflow

Angular.js ng-repeat with conditional

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related