與角度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>

（無效）