javascript AngularJS 设置多选下拉菜单的值

AngularJS set values of multi-select dropdown

提问by Kode

I have a multi select dropdown that functions as appropriate when setting values, but once set, I need to display what has been selected in an update form. My values are stored in a DB (SharePoint) accessible over REST. Here is an example REST output with multiple IDs of my array:

我有一个多选下拉菜单，可以在设置值时适当发挥作用，但是一旦设置，我需要在更新表单中显示已选择的内容。我的值存储在可通过 REST 访问的数据库 (SharePoint) 中。这是一个示例 REST 输出，其中包含我的阵列的多个 ID：

"CatId": [
    18,
    80,
    84
],

Here is my select function, including retrieving the variable from REST:

这是我的选择函数，包括从 REST 检索变量：

var currentCatValue = results.CatId;

 $scope.categoryValues = [];

    appCatList.query(function (categorydata) {
        var categoryValues = categorydata.value; // Data is within an object of "value", so this pushes the server side array into the $scope array

        // Foreach type, push values into types array
        angular.forEach(categoryValues, function (categoryvalue, categorykey) {

            $scope.categoryValues.push({
                label: categoryvalue.Title,
                value: categoryvalue.ID,
            });
        })
        var currentDetailIndex = $scope.categoryValues.map(function (e) { return e.value; }).indexOf(currentCatValue);
        $scope.vm.selectedCategory = $scope.categoryValues[currentDetailIndex];
    });

Here is my HTML:

这是我的 HTML：

<select class="form-control" id="Event_Cat" data-ng-model="vm.selectedCategory"
                                data-ng-options="opt as opt.label for opt in categoryValues | orderBy:'label'" required>
                            <option style="display:none" value="">Select a Category</option>
                        </select>

回答by Icycool

EDIT:Using id (inspired by yvesmancera) in ng-model would greatly reduce the complexity - You don't need to pre-process your options and input array anymore, just plug it in and done!

编辑：在 ng-model 中使用 id（受 yvesmancera 启发）将大大降低复杂性 - 您不再需要预处理您的选项和输入数组，只需插入即可完成！

<select multiple ng-model="currentCatValue" ng-options="opt.ID as opt.Title for opt in categoryValues">

$scope.currentCatValue = currentCatValue;
$scope.categoryValues = categoryValues;

Note: normally we would pre-populate ng-options into an array to preserve the order of the options, if the original data is an object. But since you use orderBy, you can use the object directly as ng-options.

注意：如果原始数据是一个对象，通常我们会将 ng-options 预填充到一个数组中以保留选项的顺序。但是由于您使用 orderBy，您可以直接将对象用作 ng-options。

fiddle

小提琴

---

---

Outdated:

过时：

You need to point to the same object in ng-options for them to get selected on load.

您需要在 ng-options 中指向同一个对象，以便它们在加载时被选中。

$scope.categoryValues = [];
$scope.vm.selectedCategory = [];

angular.forEach(categoryValues, function (categoryvalue, categorykey) {
    var category = {
        label: categoryvalue.Title,
        value: categoryvalue.ID,
    }      

    $scope.categoryValues.push(category);

    if (currentCatValue.indexOf(parseInt(category.value)) != -1) {
        $scope.vm.selectedCategory.push(category);
    }
});

回答by yvesmancera

Try changing your ng-options to something like:

尝试将您的 ng-options 更改为：

<select class="form-control" id="Event_Cat" data-ng-model="vm.selectedCategory" data-ng-options="opt.id as opt.label for opt in categoryValues | orderBy:'label'" required>
      <option style="display:none" value="">Select a Category</option>
</select>

And make this line change in your controller:

并在您的控制器中更改此行：

$scope.vm.selectedCategory = $scope.categoryValues[currentDetailIndex].id;

Edit for multiple selection:

编辑多选：

<select class="form-control" id="Event_Cat" data-ng-model="selectedCategoriesIds" data-ng-options="opt.id as opt.label for opt in categoryValues | orderBy:'label'" required multiple>
      <option style="display:none" value="">Select a Category</option>
</select>

In your controller, add the items you want selected to $scope.selectedCategoriesIds e.g.:

在您的控制器中，将您想要选择的项目添加到 $scope.selectedCategoriesIds 例如：

$scope.selectedCategoriesIds = [];
$scope.selectedCategoriesIds.push('18');
$scope.selectedCategoriesIds.push('80');