Serendip

Web Studio

AngularJS: input.radio のサンプルを参考にして、ng-repeat を使って input をループで作ろうとしたら、結果の出力が変わらない状態になってしまった。

ng-repeat がスコープを生成するために、ng-model に設定した変数がスコープ内のローカルなものになってしまうためらしい。

そこで、$parent を使うと親のスコープへアクセスすることができ、結果の出力も表示されるようになった。

デモ

HTML

<form name="myForm" ng-controller="Ctrl">
  <div ng-repeat="color in colors">
    <input type="radio" ng-model="$parent.color" value="{{color.color}}"> {{color.name}}
  </div>
  <tt>color = {{color}}</tt><br/>
</form>

JavaScript

var Ctrl = function($scope) {
  $scope.colors = [
    { color: 'red'  , name: "Red" },
    { color: 'green', name: "Green" },
    { color: 'blue' , name: "Blue" }
  ];
  $scope.color = $scope.colors[0].color;
};

参考：javascript – Pass parent scope value into ng-repeat loop in Angular – Stack Overflow
　　　AngularJS: input.radio