angular js array of objects for select with ngOptions

Question

I have a character which can contain multiple skills. Skills are available from an injected service. What I basically want is this:

<div ng-repeat="skill in character.getSkills()">
    <select ng-model="skill" ng-options="select as s.toString() for s in getAllSkills()"></select>
    <button ng-click="character.removeSkill(skill)" >Remove Skill</button>
</div>

With this code, the select box doesn't work as I would expect it. Skills are not set in the character, and selections are not kept in the drop down.

Am I missing something?

Thanks in advance, roemer

Each iteration of ng-repeat creates its own (child) scope. Therefore, ng-mode="skill" will create a skill primitive property on the child scope, not on the scope where character is defined. See stackoverflow.com/questions/14049480/… (section ng-repeat) for some ideas. — Mark Rajcok
– Mark Rajcok, Commented Apr 5, 2013 at 17:06
great artikle, thanks for pointing this out. what I don't get is, that in my case, skills are objects, and not primitives. so shouldn't the skill in the ngrepeat reference the character skill..? — roemer
– roemer, Commented Apr 6, 2013 at 7:10
Sorry, I didn't realize each skill is an object. (It would be helpful to include some more code next time.) — Mark Rajcok
– Mark Rajcok, Commented Apr 6, 2013 at 16:01

roemer · Accepted Answer · 2013-04-06 09:08:37Z

1

After all, I'm referencing the skill in the character.skills array by the $index property in the child scope:

<select ng-model="character.skills[$index]" ng-options="sk as sk.toString() for sk in getAllSkills()"></select>

answered Apr 6, 2013 at 9:08

roemer

5372 gold badges5 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

angular js array of objects for select with ngOptions

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related