Angular.js -修改数据后刷新视图ng-选项
提问于 2016-08-09 14:54:30
我有select with ng-options，它使用来自一个控制器的数据。数据是由ajax在app上检索的二维数组，以键值对开头，如下所示：
'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">在app start中一切正常，但是在修改我的链接数组后出现问题。用户可以添加新元素，如下所示：
// Watch new element variables
$scope.addNewElement = function() {
var newElement = $('#inputElementId').val();
// (...)
$scope.links[newElement[0]][newElement[1]] = newElement[2];
$scope.selectedLink = newElement[1];
// (...)
};问题是视图不会刷新。select选项中仍然只有旧的链接数组数据。我试过使用$scope.$apply，但它不起作用。
我只能使用jquery“重画”所有选项，但不能使用ng-model、ng-change等。在更改数组数据后，我应该如何触发刷新UI？
回答 1
Stack Overflow用户
发布于 2016-08-09 15:12:32
下面是一个有效的示例。如果你从一个'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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38854132
复制相关文章
腾讯云开发者
