2016-05-29 5 views
0

ループの複数のラジオボタンをループに入れ、グループ名とそのインデックスの組み合わせを使用して一意にしようとしていますラジオボタンをグループ化します。問題は、ループ内の最後のグループにのみラジオボタンがチェックされていることです。ループ内の他のグループには何もチェックされていません。角度:ループ(ng-repeat)のラジオボタングループの配置 - 選択が機能しない

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - Dynamically populate Radio buttons in a loop</title> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
</head> 
<body ng-app="radioSetsExample"> 
    <script> 
    angular.module('radioSetsExample', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
     $scope.groups = [{ 
      name: 'group_one', 
      type: 'CHOOSE' 
     }, { 
      name: 'group_two', 
      type: 'ADD' 
     }, 
     { 
      name: 'group_three', 
      type: 'ADD' 
     }]; 
    }]); 
</script> 
<form ng-controller="ExampleController"> 
     <div class="radio-inline" ng-repeat="group in groups"> 
     {{group.name}} - TYPE: 
     <label> 
     <input type="radio" name="{{group.name}}_{{$index}}" value="CHOOSE" ng-model="group.type"> 
      Choose 
     </label> 
     <label> 
     <input type="radio" name="{{group.name}}_{{$index}}" value="ADD" ng-model="group.type"> 
      Add 
     </label> 
     </div> 
</form> 
</body> 
</html> 

Plunker

私は手動でのループで各グループに独自の「名前」を与えるとインデックスを使用しない場合、すべてが正常に動作します。しかし、リストはダイナミックになり、ユニークな名前がないので、実際にはできません。インデックスに依存して各グループに一意の名前を付ける必要があります。

私はここで何が欠けていますか?

答えて

1

あなたは罰金WOK必要があり、その後name="{{group.name+'_'+$index}}"の代わりname="{{group.name}}_{{$index}}"を使用することができます。

<form ng-controller="ExampleController"> 
     <div class="radio-inline" ng-repeat="group in groups"> 
     {{group.name}} - TYPE: 
     <label> 
     <input type="radio" name="{{group.name+'_'+$index}}" value="CHOOSE" ng-model="group.type"> 
      Choose 
     </label> 
     <label> 
     <input type="radio" name="{{group.name+'_'+$index}}" value="ADD" ng-model="group.type"> 
      Add 
     </label> 
     </div> 
</form> 
+0

ありがとう!それはそれを働かせる。より多くの表現構文を掘り起こす必要があります。再度、感謝します。 –

+0

あなたは歓迎され、私が助けてくれたことを嬉しく思っています:) –

0

ラジオボタンは一意の名前プロパティを必要としますが、現在起こっていることは、ng-repeatを反復しているときに、最初の反復でAddラジオとChooseラジオの両方に同じ名前のgroup_one_1が追加されます。

これは可能でしょう:

<label> 
    <input type="radio" name="choose_{{$index}}" value="CHOOSE" ng-model="group.type"> 
     Choose 
</label> 
<label> 
    <input type="radio" name="add_{{index}}" value="ADD" ng-model="group.type"> 
     Add 
</label> 

Updated Working Plunk

+0

こんにちはDev-One..Thanks!しかし、私は本当にそれを行うことはできません。私はインデックスを削除する場合、それが動作することを知っている - 私はグループに固有の名前を派生するためにインデックスを使用しています - 実際のシナリオで私は各グループに一意の名前を持っていません。インデックスを使用して問題を引き起こしている理由について、私はより興味があります。 –

+0

@JohnbabuKoppoluは答えの更新を参照してください。 – Sajal

+0

これはラジオボタンのグループ化を壊します。ラジオボタンは2つの異なる名前を持つためです。今答えが得られました。私の表現構文が間違っていた。他の回答を参照してください –

関連する問題