Unable to use 2 way binding on SELECT element in Angular JS programmably

Question

I am having the hardest time getting two way binding to work for SELECT elements. I am trying to change the selected element programmably. I've found several Stackoverflow examples for binding the change event for SELECT, but I've not been many going the other way, where your application code changes the selected element.

There have been a few that I've found that use ng-repeat on an OPTION element but I've a) not been able to get it to work, and b) does not seem to be the "Angular Way".

HTML Code:

<div ng-controller="SIController">
<select id="current-command" ng-model="currentCommand"
ng-options="c as c.label for c in availableCommands track by c.id"></select>
<button ng-click="changeSelectedOption()">Select "open"</button>

Controller Code:

var myApp = angular.module('myApp', []);

function SIController($scope) {

    $scope.availableCommands = [
        {id: 'edit',        label: 'Edit'},
        {id: 'open',        label: 'Open'},
        {id: 'close',       label: 'Close'}
    ];

    $scope.currentCommand = "close";
    $scope.changeSelectedOption = function() {
        $scope.currentCommand = 'open';
    };  
};

I can verify that $scope.currentCommand is changing when the button is clicked, but the OPTION does not seem to be getting selected.

Fiddle here

Pierre-Alexandre Moller · Accepted Answer · 2015-07-28 13:55:22Z

1

Is there the working fiddle : http://jsfiddle.net/bzhkkw18/9/

To explain what I've done, there is the name of the function which didn't match on the ng-click and in the controller.

And the main part was the definition of your option. In your ng-options you set the all object. If it's what you really want, you have to do the same in your currentCommand like this :

//Object 2 is close
$scope.currentCommand = $scope.availableCommands[2];

answered Jul 28, 2015 at 13:55

Pierre-Alexandre Moller

2,3541 gold badge22 silver badges29 bronze badges

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

3 Comments

Kevin Schroeder Over a year ago

Thanks. I think that part of my problem is that when the data goes out of the select object (i.e. clicking it) it comes out in one format, but selecting it via JavaScript requires a different format. Looks like I might have some minimal refactoring to do.

Pierre-Alexandre Moller Over a year ago

You're welcome. The same format is require in currentCommand. But it was different, on your ng-model you have all the object. And when you set it, you put just the label. You only need to harmonize the values. If you want to save the all object my answer is OK. If you just want to save the label, there is some refactoring to do.

Kevin Schroeder Over a year ago

I have a follow up question. In my real app the data binding is working, but it only happens when I call some other command. In order for me to make it work when the model is changed I need to call $scope.$apply() but I don't understand why and I'd rather it be automatic. The method IS being called from a third party library that is handling key bindings.

Community · Accepted Answer · 2017-05-23 12:16:09Z

0

I recently had a similar problem. Take look at my answer. You should modify the way you defined ng-options.

function MyCtrl($scope) {
    $scope.values = [
        {name : "Daily", id : 1},
        {name : "Weekly", id : 2},
        {name : "Monthly", id : 3},
        {name : "Yearly", id : 4}];
    $scope.selectedItem = $scope.values[0].id;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
    <select ng-model="selectedItem" ng-options="selectedItem.id as selectedItem.name for selectedItem in values"></select>
    selectedItem: {{selectedItem}}
</div>

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Jul 28, 2015 at 13:48

Andrzej Gis

14.4k15 gold badges89 silver badges138 bronze badges

3 Comments

Okazari Over a year ago

This will really depend about what you want into the "selectedItem". If you want an id, that's a good way. If you need the whole object you need to keep the first syntax.

Andrzej Gis Over a year ago

@Okazari When you do 'ng-options="selectedItem as ....' it binds to the whle object.

Okazari Over a year ago

Yup, but i just wanted to put a warning. You exemple will only give the "in" into "selectedItem" and that may not be what the op want.

Collectives™ on Stack Overflow

Unable to use 2 way binding on SELECT element in Angular JS programmably

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related