AngularJS Multiple Select not showing preselected options

Question

I have been most part of the morning working on a solution for when I need to assign several values to an entity on my form.

So, the idea is I have an Entity called QualityData and this entity can have different MechanismIdentifiers.

Best solution I thought of, use a multiple select.

All works fine combining both these solutions:

AngularJS selecting multiple options

Get value when selected ng-option changes

I can access the array of selected options, assign it to my entity, etc... But I have a "minor" fallback, which is that I can't get the preselected options (the ones that would come from the server when loading data for editing) to be highlighted in the select field when using a dynamic approach such as <option ng-repeat> or ng-options, it will only work when hardcoding the options. Another bug is that if I wish to add more values than those that are in the preselected array, it will erase all values present in it when using a dynamic approach, working fine when harcoding.

The markup:

<select multiple ng-change="showAlert(selectedValues)" ng-model="selectedValues">
                    <!--ng-options="resDatasIdOfMechanism as resDatasIdOfMechanism.name for resDatasIdOfMechanism in resDatasIdOfMechanisms track by resDatasIdOfMechanism.id" value="resDatasIdOfMechanism.id">-->

                   <option value="1">{{resDatasIdOfMechanisms[0].name}}</option>
                    <option value="2">{{resDatasIdOfMechanisms[1].name}}</option>
                    <option value="3">{{resDatasIdOfMechanisms[2].name}}</option>
                </select>

If I try to use the line that is commented, it's when the marked option will not work

The controller:

$scope.selectedAlready = [{id:1, name:"Based on Antibiogram"}];
            $scope.selectedMechanisms=[];
            $scope.resDatasIdOfMechanisms = [{id:1,name:"Based on Antibiogram"}, {id:2,name:"Molecular"}, {id:3,name:"Genetic"}];
            $scope.selected = $scope.selectedAlready;

            $scope.selectedValues = [];

            $scope.$watch('selected', function(nowSelected){
                $scope.selectedValues = [];
                if( ! nowSelected ){
                    return;
                }
                angular.forEach(nowSelected, function(val){
                    $scope.selectedValues.push( val.id.toString());
                    console.log("look");
                });
            });

            $scope.showAlert=function(listOfMultipleChoices){
                //alert(object);
            }

EDIT to add jsfiddle link which is working but I still haven't found solution to original question: https://jsfiddle.net/StevenEvenSteven/ybapx09w/

Gangadhar Jannu · Accepted Answer · 2017-01-26 16:20:36Z

1

There is a typo in your code.

Add a comma after '$scope' in your controller definition

fiddleApp.controller('myFiddle', ['$scope', function($scope) {

I've forked your jsfiddle and it is working as you expected.

answered Jan 26, 2017 at 16:20

Gangadhar Jannu

4,4626 gold badges33 silver badges55 bronze badges

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

1 Comment

Steven Over a year ago

Thank you so much for that, saved me some time and anger if I were to find the typo :)

Collectives™ on Stack Overflow

AngularJS Multiple Select not showing preselected options

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related