CODEWITHSUNDEEP
javascriptangularjs
None
None

Reputation: 5670

set selected value for select element angularJS

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/

Upvotes: 1

Views: 80

Answers (4)

Oskar Lindberg
Oskar Lindberg

Reputation: 2294

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/

Upvotes: 1

Shawn C.
Shawn C.

Reputation: 6841

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

Upvotes: 1

dfsq
dfsq

Reputation: 193251

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];

Upvotes: 3

sylwester
sylwester

Reputation: 16498

You can do that by:

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

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

Upvotes: 1

Related Questions