angularjs - カスタム ドロップダウン内の角度バインディング スパン

Question

ロールを作成するためにフォームで使用する以下のようなカスタム ドロップダウンがあります。ドロップダウンの目的は、ロールに関連付ける CSS クラスを選択することです。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>