使用ui-select2将对象指定为模型属性

时间:2013-09-24 15:45:59

标签: jquery-select2 angular-ui angularjs-select2

用于说明我使用angular-UI select2的问题的假设示例。假设我有一个屏幕,我想编辑一个“游戏”模型。一个游戏,其中包括玩家。我希望能够通过select2下拉菜单设置播放器。这是一些示例代码: app.js

$scope.getGamePromise().then(function(results) {
    $scope.game = results;
    console.log(game.players); //prints [{name:'Joe',age: 15},{name:'Sally',age:16}]
});

$scope.players = [
    {
        name: 'Joe',
        age: 15
    },
    {
        name: 'Fred',
        age: 14
    },
    {
        name: 'Sally',
        age: 16
    },
    {
        name: 'Lucy',
        age: 13
    }
]

view.html

<select ngModel="game.players" ui-select2 multiple>
    <option ng-repeat="player in players" value="player">{{ player.name }}</option>
</select>

当我想保存这个“游戏”对象时,我将游戏对象发送到服务器。服务器期望game.players成为一个对象数组。但是,发送的是一个字符串。我对角度很熟悉,而且对于select2来说是全新的。如何让我的select2将game.players设置为一个对象数组而不是字符串?

1 个答案:

答案 0 :(得分:1)

我猜你找到了另一个解决方案,或者你不再有问题了。无论如何,我在这里发布:

使用

<input>

而不是

<select>

示例:

<input type="hidden" ui-select2="playersCfg" ng-model="players"/>

以下配置:

$scope.playersCfg = {
        multiple: true,
        allowClear: true,
        data: { results: Player.query(), text: 'name' },
        formatResult: function(item) {
            return "<div class='select2-user-result'>" + item.name + "</div>";
        },
        formatSelection: function(item) {
            return item.name;
        }
    };

Player.query()

是一个返回包含名称(名称)和标识符(id)

的播放器列表的资源

希望它会对某人有所帮助!