Angular.js - リフレッシュビューのNG-オプションは後のデータ

Question

私はNG-オプションで選択を変更する必要があり、それはコントローラのいずれかからのデータを使用しています。

'option1' : array[ 1: "Test", 2: "Test2" ], 
'option2' : array[ 12: "abc", 26: "zyc" ], 
'option3' : array[ 14: "fdfd", 27: "fdf" ], 
'option4' : array[ 15: "dff", 28: "dffd" ], 

とビュー：データは次のようにキーと値のペアで始まりアプリ上でAJAXによって取り出され、二次元配列である

<select name="selectedLink" id="selectedLink" ng-model="selectedLink" ng-options="key as value for (key , value) in links[selectedType]" ng-change="changeLinkName()" placeholder="Please Select" class="annotation-element"> 

すべては、アプリ起動で正常に動作しますが、問題があるの後に私を変更しますリンク配列。新しい要素を追加すると、次のようになります。

// Watch new element variables 
$scope.addNewElement = function() { 
    var newElement = $('#inputElementId').val(); 
    // (...) 
    $scope.links[newElement[0]][newElement[1]] = newElement[2]; 
    $scope.selectedLink = newElement[1]; 
    // (...) 
}; 

問題は表示が更新されないことです。選択肢には古いリンク配列データしかありません。 $ scope。$ applyを使ってみましたが、うまくいきません。

など私はjqueryのを使用して、すべてのオプションを「再描画」することができ、その後私は、NG-モデルを使用することはできません、NG-変更私は、変更配列データの後にリフレッシュUIを起動するために何をすべき？

Answer 1

ここに実例があります。 '[ng-click]'からあなたの "add"関数を呼び出すと、それは更新されるはずです。

angular.module('app', []) 
 
    .controller('someCtrl', function ($scope) { 
 
    $scope.opts = [ 
 
     {id: '1', name: 'Option 1'}, 
 
     {id: '2', name: 'Option 2'}, 
 
     {id: '3', name: 'Option 3'} 
 
    ]; 
 
    $scope.model = $scope.opts[0]; 
 
    
 
    $scope.add = function() { 
 
     var idx = $scope.opts.length + 1; 
 
     $scope.opts.push({ id: idx, name: 'Option ' + idx }); 
 
    }; 
 
    }); 
 

 
angular.element(document).ready(function() { 
 
    angular.bootstrap(document.querySelector('#app'), ['app']); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 

 
<div id="app" ng-controller="someCtrl"> 
 
    <button type="button" ng-click="add()">Add</button> 
 
    <hr> 
 
    <select ng-model="model" ng-options="o.name for o in opts"></select> 
 
</div>