如何使用绑定到ng-repeat中的模型的Angular JS预先选择单选按钮

Question

我有以下HTML：

<div ng-controller="CreateSpreadsheetCtrl as csCtrl" ng-init="csCtrl.init()">
    <div ng-repeat="x in csCtrl.ProcessingTypeMasters">
        <input type="radio" name="proctype" 
               ng-model="$parent.csCtrl.Template.ProcessingTypeMaster"
               ng-value="x" /> {{x.LocalizedName}}
    </div>
</div>

在CreateSpreadsheetCtrl.init（）内部，我们正在加载一个名为“ ProcessingTypeMasters”的数组（csCtrl.ProcessingTypeMasters），该数组包含对象列表（例如{Id：1，Name：“ Type 1”}，{Id：2，Name： “类型2”}）。

同样在init（）方法中，我们加载此“ csCtrl.Template”对象，该对象内部具有一个称为“ ProcessingTypeMaster”（csCtrl.Template.ProcessingTypeMaster）的属性。

使用上面的代码，它可以正确绑定到模型，并且当您更改选择时，csCtrl.Template.ProcessingTypeMaster可以正确绑定。

但是，当csCtrl.Template.ProcessingTypeMaster预加载有现有对象时，在页面最初加载时不会在UI中选择它。

关于我们在这里缺少什么的任何想法？

Answer 1

当csCtrl.Template.ProcessingTypeMaster预加载有现有对象时，页面初始加载时不会在UI中选择它。

模型值必须是对出现在集合中的确切对象的引用-副本将不起作用。

使用不在集合中的对象的示例（无效）

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script> var myApp = angular.module('myApp', []); myApp.controller('CreateSpreadsheetCtrl', [MyCtrl]); function MyCtrl() { var vm = this; vm.ProcessingTypeMasters = [{ id: 0, LocalizedName: 'Option 0' }, { id: 1, LocalizedName: 'Option 1' }, { id: 2, LocalizedName: 'Option 2' }]; vm.Template = { //This is a different object - it doesn't exist in the collection! ProcessingTypeMaster: { id: 1, LocalizedName: 'Option 1' } } } </script> <div ng-app="myApp"> <div ng-controller="CreateSpreadsheetCtrl as csCtrl" ng-init="csCtrl.init()"> Model value: {{csCtrl.Template.ProcessingTypeMaster}} <div ng-repeat="x in csCtrl.ProcessingTypeMasters"> <input type="radio" name="proctype" ng-model="$parent.csCtrl.Template.ProcessingTypeMaster" ng-value="x" />{{x.LocalizedName}} </div> </div> </div> 

直接从集合中使用对象的示例

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script> var myApp = angular.module('myApp', []); myApp.controller('CreateSpreadsheetCtrl', [MyCtrl]); function MyCtrl() { var vm = this; vm.ProcessingTypeMasters = [{ id: 0, LocalizedName: 'Option 0' }, { id: 1, LocalizedName: 'Option 1' }, { id: 2, LocalizedName: 'Option 2' }]; vm.Template = { //Now we're using a reference to an object in the collection ProcessingTypeMaster: vm.ProcessingTypeMasters[1] } } </script> <div ng-app="myApp"> <div ng-controller="CreateSpreadsheetCtrl as csCtrl" ng-init="csCtrl.init()"> Model value: {{csCtrl.Template.ProcessingTypeMaster}} <div ng-repeat="x in csCtrl.ProcessingTypeMasters"> <input type="radio" name="proctype" ng-model="$parent.csCtrl.Template.ProcessingTypeMaster" ng-value="x" />{{x.LocalizedName}} </div> </div> </div>