11627


AngularJSを使って以下のようにラジオボタンを動的に配置したのですが、1つのラジオボタンを押すとすべてのラジオボタンが選択状態になってしまい困っています。どこが間違っているのか教えて下さい。よろしくおねがいします。

[code]

    271   $scope.satisfactions=[];
    272   for(var i=1; i<6; i++){
    273     $scope.satisfactions.push(i);
    274   }
    
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    28   <div class="form-group">
     29     <label for="satisfaction" class="control-label col-sm-3 col-xs-12" class="fontrol-label">満足度</label>
     30     <div ng-repeat="satisfaction in satisfactions" class="checkbox-inline">
     31     <label for="satisfaction{{satisfaction}}">
     32       <input type="radio" id="satisfaction_{{satisfaction}}" name="satisfaction_{{satisfaction}}" ng-model="$parent.inquery.satisfaction" value="$index"/> {{satisfaction}}
     33     </label>
     34     </div>
     35   </div>
    
[/code]


CC BY-SA 3.0
2015-06-23T00:05:12.987
11620
2015-06-23T02:44:07.110
7232
question
html angularjs
ラジオボタンを押すとすべての選択肢が変わってしまう。


ラジオボタンの`value`が同じ値になっているのが原因ではないかと思います。  
`value`にindexを設定するのであれば、こんな感じに変更してみてください。

[code]

    <div class="form-group">
      <label for="satisfaction" class="control-label col-sm-3 col-xs-12" class="fontrol-label">満足度</label>
      <div ng-repeat="(index, satisfaction) in satisfactions" class="checkbox-inline">
        <label for="satisfaction{{satisfaction}}">
         <input type="radio" id="satisfaction_{{satisfaction}}" name="satisfaction_{{satisfaction}}" ng-model="$parent.inquery.satisfaction" value="{{index}}"/> {{satisfaction}}
        </label>
      </div>
    </div>
    
[/code]


CC BY-SA 3.0
2015-06-23T01:57:05.200
11625
2015-06-23T01:57:05.200
3516
11620
answer


`$index`は0から始まるので値がズレませんか？

AngularJSでラジオボタンを使うときは、ng-modelに同じ値を指定してvalueもしくはng-valueで値を設定すると良いと思います。

[code]

    $scope.satisfactions=[];
    for(var i=1; i<6; i++){
      $scope.satisfactions.push(i);
    }
    $scope.select_satisfaction=1;
    
[/code]

・・・

[code]

    <label><input type="radio" ng-model="$parent.select_satisfaction" ng-value="satisfaction"> {{satisfaction}}</label>
    
[/code]


CC BY-SA 3.0
2015-06-23T02:44:07.110
11627
2015-06-23T02:44:07.110
2232
11620
answer