Javascript 角度预选/初始绑定到多选

我试图绑定来自web服务的数据，然后使用该数据预填充表单。除单个多选元素外，所有表单控件都已正确绑定。如果我手动选择一个选项，则模型不会更新。下面是我的控制器：

myApp.controller('AdminVideosEditCtrl', [
    '$scope',
    '$http',
    '$routeParams',
    '$location',
    function($scope, $http, $routeParams, $location) {
        $http.get('/videos/' + $routeParams.videoId + '?embed=presenters').success(function(data) {
            $scope.video = data.data
            // Load providers
            $http.get('/providers').success(function(data) {
                $scope.providers = data.data;
                // Load Presenters
                $http.get('/presenters').success(function(data) {
                    $scope.presenters = data.data;
                });
            });
        });
    }
]);

一旦最后一个请求返回，我的模型如下所示（通过

{{video | json}}

输出）：

以下是multi-select在我的视图中的外观：

<div class="form-group">
    <label for="presenters" class="col-lg-2 control-label">Presenters</label>
    <div class="col-lg-10">
        <select multiple="multiple" class="form-control" id="presenters" ng-model="video.presenters" ng-options="presenter.full_name for ( id , presenter ) in presenters">
        </select>
    </div>
</div>

解决方案 把这个放在控制器的底部

$scope.video.presenters.forEach(function(obj, idx){
    $scope.presenters.forEach(function(presenter, jdx){
        if (obj.id === presenter.id) {
            $scope.video.presenters = [$scope.presenters[jdx]]
        }
    });
});

更稳健的解决方案 由于您可能希望预选多个选项，因此这更为健壮。此解决方案将每个选定选项推送到一个数组中，然后将其分配给

$scope.video.presenters

模型

    var selectedOptions = [];

    $scope.video.presenters.forEach(function (obj, idx) {
    $scope.presenters.forEach(function (presenter, idj) {
        if (obj.id === presenter.id) {
            selectedOptions.push($scope.presenters[idj]);
            $scope.video.presenters = selectedOptions;
        }
    });

注意：理想情况下，应该使用

id

键作为对象的唯一键。

---

此解决方案假定并仅满足预先选择一个选项的要求。

我为您设置了一个提琴。选择框中似乎没有出现任何内容。你确定那里有任何数据吗？@dcodesmith是的，演示者实际上是从第三次

$http

调用加载的（并且在

$scope.presenters

中直播，而不是

$scope.video.presenters

，它们是为视频选择的）你能更新小提琴以显示它的工作吗，我已经为你做了一半了。IDLE更新：请链接，现在链接应该不同了，不做任何延迟，我认为这不起作用，因为ng init将在我的包含演示者返回的服务调用之前执行。不确定这是否起作用，请检查：我已将初始演示者更改为第二个条目，但是第一个是被选中的那一个。。在第二个foreach中需要第二个索引参数。唯一标识符是id参数。同样，将分配更改为推送也支持多个演示者，+1，谢谢您的帮助！

$scope.video.presenters.forEach(function(obj, idx){
    $scope.presenters.forEach(function(presenter, jdx){
        if (obj.id === presenter.id) {
            $scope.video.presenters = [$scope.presenters[jdx]]
        }
    });
});

    var selectedOptions = [];

    $scope.video.presenters.forEach(function (obj, idx) {
    $scope.presenters.forEach(function (presenter, idj) {
        if (obj.id === presenter.id) {
            selectedOptions.push($scope.presenters[idj]);
            $scope.video.presenters = selectedOptions;
        }
    });