2016-11-16 4 views
0

私はAngularJSで同じことを達成する2つのバージョンを持っています(これは私が初めてで、今学習しています)。どのように動的ラジオボタンにバインドする方が良いですか?

コードは次のとおりです。コードペンを好む人のために:oldnew

どれが良いのですか?なぜですか?

また、古いバージョンは関数と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>

+0

「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

答えて

2

ドット問題は、プリミティブ対非プリミティブ上のスコープの継承動作を発生します。これはよく知られているAngularのバグ/機能です。ドット表記なしで新しいメソッドを動作させる方法はありません(Angularドキュメントでは、そうしてはいけないと言います)。

は、詳細はこれらを参照してください。

古い対新しい方法の選択は、個人的な事前に降りてきます最近では、ドキュメントと大部分のAngularデベロッパが新しいメソッドを使用するように指示していますが、これはもっと薄く見え、Angularのダブルバインディングを完全に利用しています(外部から何か色が変わった場合に何が起こるか考えてください)。

+0

説明して良質のリンクをありがとう:) – Julix

+0

私は助けることができたことを歓迎します! :) – Shomz

関連する問題