AngularJS设置多选下拉列表的值

Question

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:

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

Here is my select function, including retrieving the variable from 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:

<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>

Answer 1

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!

<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.

fiddle

---

Outdated:

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

$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);
    }
});

Answer 2

Try changing your ng-options to something like:

<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 eg:

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