Question

我选择了ng-options，它使用来自其中一个控制器的数据。数据是ajax在app start上使用键值对检索的二维数组，如：

'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

这是一个工作示例。如果你打电话给你的＆＃34;添加＆＃34;函数来自＆＃39; [ng-click]`它应该更新。

＆＃13;

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']);
});

＆＃13;

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

＆＃13;

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

1 个答案: