set selected value for select element angularJS

Question

My code is like this

    <body ng-app="myApp" ng-controller="MainCtrl">
    <select data-ng-model="myclass" data-ng-options="color.name for color in colors">
        <option value="">-- Select Freight Class --</option>
    </select>
</body>

    angular.module('myApp', []).controller('MainCtrl', [
    '$http', '$scope', '$filter', function ($http, $scope, $filter) {
    $scope.myclass = {
        "name": "65"
    };
    $scope.colors = [{
        name: '50'
    }, {
        name: '55'
    }, {
        name: '105'
    }, {
        name: '110'
    }, {
        name: '400'
    }, {
        name: '500'
    }];

}]);

as you can see I am trying to set default selected value of this select as 65 but its not working. Can any one tell me how to achieve this? http://jsfiddle.net/d8kg0uys/

dfsq · Accepted Answer · 2014-10-31 13:12:31Z

3

First of all you don't have {"name": "65"} object in colors array at all. But even if you tried to select option {"name": "55"} it would not work. And the reason is because $scope.myclass is not equal to any element in colors array.

Angular compares objects to set corresponding option as selected, and one object equals to another only when it's the same object. So to correctly set selected value you have to provide a reference to an object in colors array:

$scope.myclass = $scope.colors[1];

edited Oct 31, 2014 at 13:12

answered Oct 31, 2014 at 13:06

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Comments

sylwester · Accepted Answer · 2014-10-31 13:04:17Z

1

You can do that by:

$scope.myclass = $scope.colors[1];

please see here http://jsfiddle.net/9d0f8sdj/1/

answered Oct 31, 2014 at 13:04

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:49:39Z

1

You are binding an object to the ng-model, not the object's field. Not that that is bad but comparing objects in javascript is not as simple as it is in other languages. https://stackoverflow.com/a/1144249/1264360

Also 65 is not in your options list so it is defaulting to the default value.

<select data-ng-model="myclass.name" data-ng-options="color.name as color.name for color in colors">
    <option value="">-- Select Freight Class --</option>
</select>

http://plnkr.co/edit/YLFgjILNUC0RP2aBAT6q?p=preview

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Oct 31, 2014 at 13:10

Shawn C.

6,9213 gold badges37 silver badges39 bronze badges

Comments

Oskar Lindberg · Accepted Answer · 2014-10-31 13:21:15Z

1

See AngularJS Reference for Select; You do this by selecting the index of the value you want:

angular
    .module('myApp', [])
    .controller('MainCtrl', ['$http', '$scope', '$filter',
        function ($http, $scope, $filter) {

            $scope.colors = [{
                name: '50'
            }, {
                name: '55'
            }, {
                name: '65'
            }, {
                name: '105'
            }, {
                name: '110'
            }, {
                name: '400'
            }, {
                name: '500'
            }];

            $scope.myclass = $scope.colors[2];

        }]);

So, the value you want should also be in the $scope.colors list, like I added it above.

Your fiddle corrected: http://jsfiddle.net/d8kg0uys/1/

edited Oct 31, 2014 at 13:21

answered Oct 31, 2014 at 13:07

Oskar Lindberg

2,2942 gold badges17 silver badges37 bronze badges

Collectives™ on Stack Overflow

set selected value for select element angularJS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related