Angular.js - 修改数据后刷新视图 ng-options

Question

我使用 ng-options 进行选择，它使用来自控制器之一的数据。数据是 ajax 在应用程序开始时检索到的二维数组，键值对如下：

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

并查看：

<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-model，ng-change等。我应该怎么做才能在更改数组数据后触发刷新UI？

Answer 1

这是一个工作示例。如果您从 '[ng-click]` 调用“添加”功能，它应该会更新。

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>