AngularJS Select Not Binding To Ng-Model

Question

My angular select isn't binding. I can tell the value is correct, but the select isn't updated. Why is not binding if the value is there?

<div ng-controller="MyController" ng-app>
    <select class="form-control" ng-model="colorId"ng-options="color.id as color.name for color in colorList">
        <option value="">--Select a Color--</option>
    </select>
<input type="button" value="submit" ng-click="Select()"></input>

function MyController($scope) {
    $scope.colorList = [{
        id: '1',
        name: 'red'
    }, {
        id: '2',
        name: 'blue'
    }, {
        id: '3',
        name: 'green'
    }];

    var colorId = 3;
    $scope.colorId = colorId;
    alert($scope.colorId);

    $scope.Select = function () {
        var colorId = 2;
        $scope.colorId = colorId;
    }
}

Here is a fiddle:

http://jsfiddle.net/ky5F4/23/

See my answer. You are still using '1', '2', '3' for ids in your object. You need to set $scope.colorId to '1', '2', or '3' to have it bind, or you can update each id to be number (i.e. 1, 2, 3) instead of string. — Patrick
– Patrick, Commented Dec 4, 2014 at 19:34

SoluableNonagon · Accepted Answer · 2014-12-04 19:34:58Z

7

you need to change the id to a string when doing Select

$scope.Select = function () {
    console.log('select fired');
    var colorId = 1;
    $scope.mySelection.colorId = colorId + "";
}

http://jsfiddle.net/bxkwfo0s/2/

next you should use a property of an object rather than just a scope variable, this will ensure proper model binding

ng-model="mySelection.colorId"

where the object could be something simple

$scope.mySelection = {colorId : colorId };

edited Dec 4, 2014 at 19:34

answered Dec 4, 2014 at 19:29

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

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

Comments

Patrick · Accepted Answer · 2014-12-04 19:29:20Z

2

There are two errors with your code:

You are using colorList as your model in ng-options, but you are calling it datasets in your controller.
You use strings for the id, but set the $scope.colorId to a number.

Here is an updated fiddle changing ids to numbers and changing $scope.datasets to $scope.colorList

function MyController($scope) {
    $scope.colorList = [{
        id: 1,
        name: 'red'
    }, {
        id: 2,
        name: 'blue'
    }, {
        id: 3,
        name: 'green'
    }];

    var colorId = 3;
    $scope.colorId = colorId;
    alert($scope.colorId);

    $scope.Select = function () {
        var colorId = 2;
        $scope.colorId = colorId;
    }
}

answered Dec 4, 2014 at 19:29

Patrick

6,9783 gold badges25 silver badges31 bronze badges

Comments

John Wright · Accepted Answer · 2018-10-18 20:10:54Z

Consider making your ng-model be an object, specifically one of the objects that are already in your $scope.colorList. If you do that you should be able to avoid the post-processing you're doing in the click handler.

So your select will look like this:

<select class="form-control" ng-model="selectedColor" 
        ng-options="color.name for color in colorList"></select>

One gotcha is that if you have an object in your controller that looks JUST LIKE your red object, like$scope.selectedColorObj = { id : '1', name:'red' } and set the select's ng-model to that option, it won't work. Angular will see that you're setting to the ng-model to an object that's not actually in your data source and add an extra option with value="?", so I use $filter in this case to grab the matching member of the array:

 $scope.colorId = '3';
 $scope.selectedColor = $filter('filter')( $scope.colorList,{ id: $scope.colorId})[0];

See http://jsfiddle.net/ky5F4/92/

Collectives™ on Stack Overflow

AngularJS Select Not Binding To Ng-Model

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related