我正在尝试使用Angular的$ http指令从服务器中提取标记列表,并使用它来填充select2选择。我的代码如下所示:
var samplePage = angular.module('samplePage', ['ui.select2']);
samplePage.controller('sampleController', function($scope, $http) {
console.log($scope);
// THIS WORKS
$scope.tags = ['a', 'b', 'c'];
$http.get('angular.html').success(function(rc) {
console.log($scope);
// THIS DOES NOT WORK
$scope.tags = ['d', 'e', 'f'];
})
});
angular.bootstrap(document, ['samplePage']);
但是,“标签”没有更新!或者更确切地说,“标签”正在更新,但是select2小部件似乎没有正确绑定。
视图如下所示:
<div ng-app="samplePage">
<div ng-controller="sampleController">
<input id="tags" ui-select2="{tags:tags, simple_tags: true}" multiple ng-model="myTags" style="width: 150px;">
<p>$scope.tags = {{tags}}<p>
</div>
</div>
以下是完整测试应用程序的要点:https://gist.github.com/poundifdef/6544542
我是否不正确地使用select2模块?或者模块本身是否存在错误?
答案 0 :(得分:1)
ng-model
指令应该是填充select输入的$scope
。请改用ng-model="tags"
。
修改强> 当你有
<input id="tags" ui-select2="{tags:tags, simple_tags: true}" multiple ng-model="myTags" style="width: 150px;">
tags
中的ui-select2="{tags:tags, simple_tags: true}"
是指您希望在下拉列表中显示为选项的模型,而myTags
中的ng-model="myTags"
是指所选的选项。
如果要加载列表并选择一些选项,请在控制器中将其设置为$scope.myTags
。这通常应该是选项的子集(即$scope.tags
)。