0

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

roemer
  • 537
  • 1
  • 5
  • 21
  • 1
    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 http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482 (section ng-repeat) for some ideas. – Mark Rajcok Apr 05 '13 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 Apr 06 '13 at 07:10
  • Sorry, I didn't realize each `skill` is an object. (It would be helpful to include some more code next time.) – Mark Rajcok Apr 06 '13 at 16:01

1 Answers1

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>
roemer
  • 537
  • 1
  • 5
  • 21