AngularJS：リフレッシュNG-オプションのプロパティソースオブジェクトが

Question

詳しい説明変化した場合：

[ 
    { 
    id: 1, 
    name: "111", 
    some: "qqq" 
    }, 
    { 
    id: 2, 
    name: "222", 
    some: "www" 
    } 
]; 

のように定義を選択：

を私は複数のプロパティ（だけでなく、キーと値のペア）とオプションのリストを持っています

<select name="mySelect" id="mySelect" 
    ng-options="option.name for option in opts track by option.id" 
    ng-model="mod1"></select> 

アプリのロジックに応じて、余分な特性が変化することがあります。

{ 
    id: 2, 
    name: "222", 
    some: "www1" 
} 

しかし、交流を選択内のリストは変更されません！ しかし、名前が変更された場合、optionList全体がリフレッシュされます。

簡潔に言えば、デモはJSFiddleまたはJSFiddleです。余分なプロパティとキーの両方が

新しい値を受け取る誰もが解決策を知っています - ボタンをクリックすると、ボタンが

だけ余分なプロパティの更新をクリックすると

1. ：私は2つの非常によく似た例を準備しましたか？

   UPDATE

   今私はupdate + delay + update溶液でその問題を解決していの場合：

   this.click = function(){ 
       $scope.opts = {}; 
       $timeout(function() { 
       $scope.opts = { /* NEW OBJECT */}; 
       }, 0); 
   } 
   

Answer 1

OK、私はは私がオプションを選択できるようになる、あなたが望むものを理解だと思うリストがDOMでレンダリングされてからネストされた値が変更された可能性があります。

私は作成したプランカーがあなたのための解決策であると考えています。いずれかのオプションを選択し、入力フィールドで子値を変更すると、双方向バインディングによってモデルが更新されます。

基本的には、ユーザーの選択を受け取り、選択した変更では、選択したオブジェクトをoptions配列の元のオプションを参照するように再割り当てします。これにより、双方向バインディングが可能になります。コードを表示すると、入力フィールドがオプションリスト自体（$ scope.options）を更新していることがわかります。表示されるモデルは$ scope.formData.modelです。

https://plnkr.co/edit/DLhI7t7XBw9EbIezBCjI?p=preview

HTML

<select 
    name="mySelect" 
    id="mySelect" 
    ng-model="formData.model" 
    ng-change="onChange(formData.model)" 
    ng-options="option.name for option in options track by option.id"></select> 

    SELECTED CHILD: {{formData.model.child.name}} 

<hr> 

<div ng-repeat="option in options"> 
    Child Name for {{ option.name }}: <input ng-model="option.child.name"> 
</div> 

JS

$scope.onChange = function(option) { 

    angular.forEach($scope.options,function(optionItem){ 
     if (optionItem.id == option.id){ 
     $scope.formData.model = optionItem; 
     } 
    }) 


    } 

    $scope.options = [ 
    { 
     id: 1, 
     name: "111", 
     child: { 
     id: 11, 
     name: "111-1" 
     } 
    }, 
    { 
     id: 2, 
     name: "222", 
     child: { 
     id: 22, 
     name: "222-1" 
     } 
    } 
    ]; 

    $scope.formData = { 
    model: $scope.options[0] 
    };