どのようにNGリピート

Question

以内にモデル化するためにバインドされている角度JSとの事前選択ラジオラジオボタンに、私は次のようなHTMLがあります（CreateSpreadsheetCtrl.init内部

<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> 

）を、我々はと呼ばれる配列をロードしています{Id：1、Name： "Type 1"}、{Id：2、Name： "Type 2"}などのオブジェクトのリストを含む "ProcessingTypeMasters"（csCtrl.ProcessingTypeMasters）

また、init（）メソッドでは、 "ProcessingTypeMaster"（csCtrl.Template.ProcessingTypeMaster）というプロパティを持つこの "csCtrl.Template"オブジェクトを読み込みます。

上記のコードでは、モデルに正しくバインドされます。選択を変更すると、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>

から直接オブジェクトを使用して（動作しません）