Question

我按照https://github.com/angular-ui/ui-select2

中指定的方式使用select2

<div ng-controller="sampleController>
    <select ui-select2 ng-model="select2" data-placeholder="Pick a number">
        <option value=""></option>
        <option ng-repeat="number in range" value="{{number.value}}">{{number.text}}</option>
    </select>
</div>

但这不适合我。我看到下拉列表，但没有值可供选择。

如果我将其更改为具有以下静态列表，那么它可以正常工作。

<div ng-controller="sampleController">
    <select ui-select2 ng-model="select2" data-placeholder="Pick a number">
        <option value="">value1</option>
        <option value="">value2</option>
        <option value="">value3</option>
    </select>
</div>

我在这里缺少什么？

我的模型如下

function sampleController($scope){
    $scope.select2="";
    $scope.range=[{text:"name1", value:"id1"},
        {text:"name2", value:"id2"},
        {text:"name3", value:"id3"}];

    $("#e1").select2();
}

Answer 1

我认为你必须像这样使用$ timeout：

function sampleController($scope, $timeout){
    $scope.select2="";
    $scope.range=[{text:"name1", value:"id1"},
        {text:"name2", value:"id2"},
        {text:"name3", value:"id3"}];
    $timeout(function(){
      $("#e1").select2();
    }, 0);
}

为什么呢？因为$ timeout会在执行函数之前等待$ digest的结束（在你的情况下为ng-repeat）。

您之前的代码执行了此操作：

渲染HTML
$（ “＃E1”）SELECT2（）;
解释ng-repeat

所以，你的select2函数在你的select有其选项元素之前执行。

查看$ timeout文档：https://docs.angularjs.org/api/ng/service/ $ timeout

AngularJS select2没有显示任何值

1 个答案: