初期モデル値が正しく選択されない設定

Question

次の角度成分が与えられた場合、with a working plunker。値がは、特定のタイプをクリックすることでを変更しているテンプレート

<div> 
    <h3>Types</h3> 
    <div ng-repeat='document in $ctrl.types'>{{document.name}}</div> 

    <h3>Docs</h3> 
    <div ng-repeat="status in $ctrl.documents"> 
     <span ng-bind="status.documentType.name"></span> 
     <ul ng-repeat="document in status.correspondence"> 
      <li>{{document.name}}</li> 
      <li> 
       {{document.documentTypeId}} 
       <!-- ng options: can't seem to get correct mapping for just the `ID`, 
        it always binds the while type object. 
        ng-options="type.name for type in $ctrl.types track by type.id" 
       --> 
       <select 
        ng-model="document.documentTypeId"> 
        <option ng-repeat="type in $ctrl.types" value="{{type.id}}">{{type.name}}</option> 
       </select> 
      </li> 
     </ul> 
    </div> 
</div> 

selectためinital値が設定されていない

、しかしで

export const AppComponent = { 
    template: 'see below' 
    controller: class AppComponent { 
    static $inject = ["$http"]; 
    constructor(public $http) { 
    } 
    $onInit() { 
     this.$http.get("types.json").then(_ => this.types = _.data); 
     this.$http.get("docs.json").then(_ => this.documents = _.data); 
    } 
    } 
}; 

、モデルが正しくが更新されます。

ページが読み込まれたときに選択値がモデルから正しく設定されないのはなぜですか？

Answer 1

ngOptionsは、カスタム子プロパティをドロップダウンのngModelにすることができます。このように、

value as label for collectionと読むことができます。しかし、これはtrack byと一緒に使うことはできません。あなたは選択する必要がありますone or other.

この場合、反復処理するにはあまりにも複雑なオブジェクトがないので、track byを取り除くことができます。このコードは、問題を解決するのだろう

<select 
       ng-options="type.id as (type.name) for type in $ctrl.types" 
       ng-model="document.documentTypeId"> 
      </select> 

：

working example

Answer 2

あなたはこのコードを使用することができます。