加载时无法将值绑定到 ui-select

Question

我的 ui-select 指令有以下 html：

<div class="col-xs-12 col-sm-12 col-md-6">
    <div class="form-group">
        <label class="control-label small-font">Sample *</label>
        <ui-select ng-model="form.sample" theme="bootstrap" required>
            <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match>
            <ui-select-choices repeat="sample in samples">
                {{ sample.name }}
            </ui-select-choices>
        </ui-select>
    </div>
</div>

这是我的数组：

$scope.samples = [
    {
        name: 'Sample 1'
    },
    {
        name: 'Sample 2'
    }
];

我正在创建一个编辑表单，所有值都从服务器返回并加载到各自的字段中，但我无法显示 ui-select 值。

我知道还有其他类似的帖子，但我已经尝试了他们的 "solutions" 但无论如何都没有帮助我。

该值在 "form.sample" 中，我希望它在加载数据时显示为 selected 项。

Answer 1

你试过了吗:

$scope.samples = [
    {
    name: 'Sample 1'
},
{
    name: 'Sample 2'
}
];
$scope.sample = {};
$scope.sample.value = $scope.samples[0];

并从 "form.sample"

中获取 "form"

<div class="col-xs-12 col-sm-12 col-md-6">
<div class="form-group">
    <label class="control-label small-font">Sample *</label>
    <ui-select ng-model="sample.value" theme="bootstrap" required>
        <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="itemSample in samples">
            {{ itemSample.name }}
        </ui-select-choices>
    </ui-select>
</div>

ui select 指令将值应用于指定模型的 "select" 子级，因此如果您传递 form.sample 指令会在child，而不是在 form.sample 中，这就是为什么你必须将 child 属性传递给指令，很难看到

加载时无法将值绑定到 ui-select

Unable to bind value to ui-select on load

angularjs

ui-select