AngularJS set values of multi-select dropdown

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>

Icycool · Accepted Answer · 2015-06-25 02:52:54Z

5

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

edited Jun 25, 2015 at 2:52

answered Jun 24, 2015 at 19:12

Icycool

7,1991 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kode Over a year ago

No such luck. It is stating: Unable to get property 'push' of undefined or null reference

Icycool Over a year ago

You'll need to initialize the arrays before using push

Icycool Over a year ago

Maybe using id in selected by yvesmancera would suits you more. You can also try using the raw input as ng-model and see whether it works.

Kode Over a year ago

Does using id in this fashion remove the need to detect the array index?

Icycool Over a year ago

Not entirely sure what you mean, it removes the need of pre-populate ng-model

|

yvesmancera · Accepted Answer · 2015-06-24 22:15:21Z

1

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 e.g.:

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

edited Jun 24, 2015 at 22:15

answered Jun 24, 2015 at 21:21

yvesmancera

2,9255 gold badges26 silver badges33 bronze badges

1 Comment

Kode Over a year ago

That was closer, but it only selects one value in the dropdown

Collectives™ on Stack Overflow

AngularJS set values of multi-select dropdown

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related