Question

我在这里有两个版本，在AngularJS中完成同样的事情（我是新手，刚刚学习）。

代码如下。对于那些喜欢代码笔的人：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 />
		<label ng-repeat="col in colors" for={{col}}>
			<input type="radio" ng-model="my.preference" ng-value="col" id="{{col}}"
			   name="favcol">
		   {{col}}<br>
	   </label>
  <p> And the result is: {{my.preference}}</p>    </body>

Answer 1

点问题的发生是因为基元与非基元的范围继承行为。它是Angular的一个众所周知的bug /功能。没有点符号就无法使新方法有效（并且Angular文档说你不应该这样做。）

有关详细信息，请参阅以下内容：

旧方法与新方法的选择取决于个人偏好，尽管文档和大多数Angular开发人员会告诉您使用新方法 - 它看起来更精简并充分利用Angular的双重方法 - 绑定（想想如果外部修改颜色会在每种情况下会发生什么）。

哪种绑定到动态单选按钮更好？

1 个答案: