AngularJS ui-select,如何初始化多选值?

时间:2015-01-21 13:46:49

标签: javascript angularjs select angular-ui

解决方案:

自己想出来:在应用this fix并进行ui-select的自定义构建之后,整个问题不再是问题。我希望这很快就会进入官方主分公司!

问题

如何使用多个值初始化选择?我正在尝试这个,但它没有在选择中显示所选项目。

首先,我认为它通过HTTP获取的异步数据有所作为,但我甚至没有使用“静态”的plunker示例来证明问题对我有效。

我认为我的问题是数据来自两个不同的来源,因此索引和两个数组之间的引用不匹配。使用服务获取类别列表,所选类别来自另一个服务,这些服务与附加到它们的数据集一起返回。而在另一个选择中,加载所有45k用户只是为了从那个庞大的列表中选择所选用的那些用户是非常不切实际的。

那么如何让我现有的选择数据出现在ui-select?

Plunker link.

HTML

<body ng-controller="MainCtrl">
        <label>Assigned Categories</label>
        <ui-select
            multiple
            ng-model="categories.selected"
            on-select="selectCategory($item, $model)"
            on-remove="deselectCategory($item, $model)">
            <ui-select-match placeholder="Select Category...">{{$item.name}}</ui-select-match>
            <ui-select-choices
                repeat="category in categories.categories track by category.id">
            {{category.name}}
            </ui-select-choices>
        </ui-select>
        <pre>{{categories | json}}</pre>
</body>

JS

var app = angular.module('plunker', [
  'ui.select'
]);

app.controller('MainCtrl', function($scope) {
        $scope.categories = {
            selected: [
        {
          "id": "1",
          "name": "Foo"
        }
            ],
            categories: [
        {
          "id": "1",
          "name": "Foo 1"
        },
        {
          "id": "2",
          "name": "Bar 2"
        },
        {
          "id": "3",
          "name": "FooBar 3"
        }
            ]
        };
});

1 个答案:

答案 0 :(得分:1)

&#34;初始化&#34; selectui-select或任何其他ng-model类型输入是通过将进入ng-model的ViewModel变量设置为所选值或对象(如这种情况)你想要的。

您试图在您的示例中执行此操作,但由于您选择了一个对象,因此您的VM应该引用相同的对象(通过引用)。您的错误是您创建了具有相同内容的其他对象。

因此,$scope.categores.selected应该是实际对象的数组(因为它是multiple):

$scope.categories = {
   categories: [
        {
          "id": "1",
          "name": "Foo 1"
        },
        {
          "id": "2",
          "name": "Bar 2"
        },
        {
          "id": "3",
          "name": "FooBar 3"
        }
    ]
};

$scope.categories.selected = [$scope.categories.categories[0]];