2016-11-16 2 views
0

Ich habe hier zwei Versionen, um dasselbe in AngularJS zu erreichen (wo ich neu bin und gerade lerne).Welche Art der Bindung an dynamische Optionsfelder ist besser?

Der Code ist unten. Für diejenigen, die Code-Stift bevorzugen: old und new.

Welche davon ist besser und warum?

Auch während die alte Version auf einer Funktion und ng-Klick beruht, vermeidet die neue Version das. Ich konnte jedoch nicht tun, was die neue Version tut, ohne das "$ scope.my" -Objekt einzubeziehen, d. H. Wenn ich es "$ scope.preference" mache, scheint die Modellierung nicht zu funktionieren. Gibt es eine Möglichkeit, dass ich das tun könnte?

Sicher, es ist etwas offensichtlich, dass ich vermisse, aber ich konnte was nicht finden.

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

Die empfohlene Best Practice besteht darin, immer einen "Punkt" in Ihre 'ng-Modelle' zu ​​setzen. Weitere Informationen finden Sie unter [DIESES VIDEO] (http://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m) von einem AngularJS-Entwicklungsteam. Siehe auch [Angular Wiki: Die Nuancen der Scope-Prototyp-Vererbung] (https://github.com/angular/angular.js/wiki/Understanding-Scopes). – georgeawg

Antwort

2

Der Punkt Problem tritt auf, weil der Umfang Vererbungsverhalten auf Primitiven vs. Nicht-Primitive. Es ist ein bekannter Bug/Feature von Angular. Es gibt keine Möglichkeit, die neue Methode ohne die Punktnotation arbeiten zu lassen (und die Angular-Dokumente sagen, dass Sie nicht sollten).

Sehen Sie diese für weitere Informationen:

Die Wahl der alten gegen neue Methode kommt auf die persönlichen pre Die Docs und die Mehrheit der Angular Devs werden Ihnen allerdings sagen, dass Sie die neue Methode verwenden sollten - sie sieht schlanker aus und nutzt Angulas Double-Binding voll aus (denken Sie daran, was passieren würde, wenn etwas Externes die Farbe verändert).

+0

Danke für die Erklärung und gute Qualität Links :) – Julix

+0

Gern geschehen, froh, dass ich helfen konnte! :) – Shomz