javascript - 使用 $http 在 angular-bootstrap-duallistbox 中设置所选项目

Question

使用 angular-bootstrap-duallistbox 组件，记录为 here ，并使用 $http 服务，如何在其上设置所选元素？

这里是使用的代码:

HTML:

<select ng-options="obj as obj.name for obj in authorizations"
        multiple
        ng-model="selections"
        bs-duallistbox
        ></select>

Javascript:

angular.module('demoApp', ['frapontillo.bootstrap-duallistbox'])
    .controller('ProfileAutAsigController',
    function ($scope, $http, Authorization) {

    $scope.authorizations = [];
    $scope.selections = [];

    Authorization.query().$promise.then(function (response) {
        $scope.authorizations = response;
        return $http.get("api/profileAut/1/authorizations");

    }).then(function (payload) {
        //This doesn't set the selected items. Specifying an
        //array manually doesn't work either.
        //$scope.selections = [{id:1, name:'Text'},{id:3, name:'Photos'}];

        $scope.selections = payload.data;

    }, function (payload) {
        //Error happened
        console.log(payload.error);
    });
});

谢谢。

Answer 1

要填充 Angular 引导双列表框，您应该使用 track by 而不是 as，如下所示:

您必须在 ng-options 中使用 track by 而不是 as

而是这样:

 <select ng-model="selected" ng-options="av as av.name for av in available" multiple bs-duallistbox></select>

用途:

 <select ng-model="selected" ng-options="av.name for av in available track by av.id" multiple bs-duallistbox></select>