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

Question

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

<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>

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

谢谢

托马斯

Answer 1

你几乎说对了。唯一的问题是 ng-repeat 创建了自己的范围，因此您要保存到的 roleCss 位于该范围内，而不是您的控制器范围内。您需要做的就是像这样添加 $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>