javascript - Angular 预选/初始绑定(bind)到多选

Question

我正在尝试绑定(bind)来自 Web 服务的数据，然后使用该数据预填充表单。除单个多选元素外，所有表单控件均正确绑定(bind)。如果我手动选择一个选项，模型就会更新。下面是我的 Controller :

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 }} 输出):

{   
    "id": "ca3ca05a-834e-47b1-aaa1-3dbe38338ca9",   
    "title": "Doloremque iure consequatur quam ea.",   
    "is_public": false,   
    "is_visible": true,   
    "url": "http://someurl.com/",   
    "provider_id": "1b4d18eb-d56c-41ae-9431-4c058a32d651",   
    "level_id": "38ed7286-da05-44b9-bfb9-e1278088d229",   
    "duration": "17:38",   
    "transcript_file": "rerum-sint-voluptatum.md",   
    "presenters": [
        {
            "id": "5111531d-5f2a-45f5-a0c4-4fa3027ff249",
            "first_name": "First",
            "last_name": "Last",
            "full_name": "First Last"
        }   
    ],   
    "provider": {
        "id": "1b4d18eb-d56c-41ae-9431-4c058a32d651",
        "title": "You Tube"   
    } 
}

在我看来，多重选择的外观如下:

<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>

select 元素正确填充，我希望它默认选择“First Last”元素，但没有选择任何内容。我知道我的模型已正确初始化，因为如果我手动选择该元素，模型中不会发生任何变化(如果我选择不同的元素，它会发生变化，但仍保留与初始页面加载时相同的结构)。

我尝试添加 $scope.$apply 调用，还尝试了 $scope.$root.$eval()，但都不起作用。 p>

更新

演示者模型(包含所有演示者)从服务中获取后如下所示(名称已更改以保护无辜者):

[
  {
    "id": "47b6e945-2d4b-44c2-b44b-adb96460864d",
    "first_name": "First",
    "last_name": "Last",
    "full_name": "First Last"
  },
  {
    "id": "5111531d-5f2a-45f5-a0c4-4fa3027ff249",
    "first_name": "One",
    "last_name": "Two",
    "full_name": "One Two"
  },
  {
    "id": "7cb1e44b-2806-4576-80b2-ae730ad356f7",
    "first_name": "Three",
    "last_name": "Four",
    "full_name": "Three Four"
  }
]

Answer 1

解决方案

只需将其放在 Controller 的底部即可

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

<强> JSFIDDLE

更强大的解决方案

这更加强大，因为您可能想要预先选择多个选项。此解决方案将每个选定的选项插入一个数组，然后将其分配给 $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;
        }
    });

<强> JSFIDDLE

注意:理想情况下，您应该使用 id 键作为对象的唯一键。该解决方案假设并且仅适用于预选一个选项。