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

要填充角度引导程序双列表框，您应该使用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>

Answer 2

最后，我无法使用$ http服务制作angular-bootstrap-duallistbox。我使用了这个角度指令，它与$ http：

一起使用

https://github.com/alexklibisz/angular-dual-multiselect-directive

请务必遵循json格式的项目。阅读示例。

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

2 个答案: