Angular.js - Ansicht-ng-Optionen nach Änderung der Daten aktualisieren

Question

Ich habe mit ng-Optionen ausgewählt, es verwendet Daten von einem der Controller. Die Daten sind zweidimensionale Anordnung von Ajax auf App mit Schlüssel-Wert-Paaren wie Start Introduction:

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

und Aussicht:

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

Alles funktioniert in app Start in Ordnung, aber es gibt Problem nach meinem ändern verbindet Array. Der Benutzer kann neues Element hinzufügen, und es sieht aus wie:

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

Das Problem ist, dass Ansicht nicht aktualisiert. Es gibt immer noch nur alte Links-Array-Daten in ausgewählten Optionen. Ich habe versucht, $ scope. $ Apply, aber es funktioniert nicht.

Ich kann alle Optionen nur mit jquery "neu zeichnen", aber dann kann ich nicht ng-model, ng-change usw. verwenden. Wie soll ich die Refresh-UI nach Änderung der Array-Daten auslösen?

Answer 1

Hier ist ein Arbeitsbeispiel. Wenn Sie Ihre "add" -Funktion von einem "[ng-click]" aufrufen, sollte sie aktualisiert werden.

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>