私はAngularJSで同じことを達成する2つのバージョンを持っています(これは私が初めてで、今学習しています)。どのように動的ラジオボタンにバインドする方が良いですか?
コードは次のとおりです。コードペンを好む人のために:oldとnew。
どれが良いのですか?なぜですか?
また、古いバージョンは関数とng-clickに依存していますが、新しいバージョンではそれが回避されます。しかし、 "$ scope.my"オブジェクトを使用せずに新しいバージョンが行うことはできませんでした。つまり、 "$ scope.preference"にするとモデリングが動作しないように見えます。私はそれをすることができる方法はありますか?
確かに、私が行方不明であることは明らかですが、何かを見つけることができませんでした。
var myApp = angular.module('myApp', []);
myApp.controller('ExampleController', ['$scope',
function($scope) {
$scope.colors = ["blue", "red", "green"];
//old way
$scope.color = "";
$scope.updateColor = function(input) {
$scope.color = input;
}
//new way
$scope.my = {preference: ''};
}
]);
<head>
<title></title>
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="ExampleController">
<!--https://docs.angularjs.org/api/ng/directive/ngValue -->
<div ng-repeat="col in colors">
<input type="radio" ng-model="color" value="col" name="favcol" ng-click="updateColor(col)">{{col}}
<br>
</div>
<p>And the result is: {{color}}</p>
<hr />
\t \t <label ng-repeat="col in colors" for={{col}}>
\t \t \t <input type="radio" ng-model="my.preference" ng-value="col" id="{{col}}"
\t \t \t name="favcol">
\t \t {{col}}<br>
\t </label>
<p> And the result is: {{my.preference}}</p> </body>
「ng-models」に常に「ドット」を入れることをお勧めします。詳細については、AngularJS開発チームの[THIS VIDEO](http://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m)を参照してください。 [Angular Wiki:スコーププロトタイプ継承のニュアンス(https://github.com/angular/angular.js/wiki/Understanding-Scopes)も参照してください。 – georgeawg