与角度JS这势必会NG重复内模型是如何预先选择单选单选按钮

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（）内，我们加载称为阵列包含对象列表（例如{Id：1，Name：“Type 1”}，{Id：2，Name：“Type 2”}）的“ProcessingTypeMasters”（csCtrl.ProcessingTypeMasters）。

同样在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>

（无效）