自定义下拉列表中的角度绑定范围

Question

我有一个自定义下拉列表，如下所示，我在表单中使用它来创建角色。下拉列表的目的是选择要与角色关联的 css 类。css 类的名称是 role0， role1， role2...。角色9

<ul class="dropdown-menu dropdown-select">
 <li ng-repeat="i in [1,2,3,4,5,6,7,8,9,10]">
  <a href="#"><input type="radio" ng-model="roleCss" value="role{{$index}}" name="d-s-r">
   <span class="label role{{$index}}">&nbsp;</span>
  </a>
 </li>
</ul>

如何绑定角色Css的值，以便保存正确的值（例如role1）？

谢谢

托马斯

Answer 1

你几乎是正确的。唯一的问题是 ng-repeat 会创建自己的作用域，因此您要保存到的角色 Css 在该作用域中，而不是控制器作用域中。您需要做的就是添加这样的$parent。

<ul class="dropdown-menu dropdown-select">
  <li ng-repeat="i in [1,2,3,4,5,6,7,8,9,10]">
  <a href="#"><input type="radio" ng-model="$parent.roleCss" value="role{{$index}}" name="d-s-r">
   <span class="label role{{$index}}">&nbsp;</span>
  </a>
 </li>
</ul>