select a value from model in a dropdown using angularJS

Question

I am aware of questions similar to mine in stack. But the difference is that I have hardcoded the options for my dropdown in my controller and then I want the dropdown to display the value in the model by default.

HTML :

<div class="form-group">
                            <label class="col-md-3 control-label" for="talent.rating">Rating*</label>
                            <div class="col-md-9">
                                <select ng-model="talent.rating"  validator="required" required-error-message="Rating is required" name="talent.rating" ng-options="obj.value as obj.text for obj in array"></select>
                            </div>
                        </div>

Controller :

myApp.controller('editTalentController', ['$scope', '$rootScope', 'talentResolved', 'accountResolved', 'talentServices', '$location', 'ngDialog', '$window',
    function ($scope, $rootScope, talentResolved, accountResolved, talentServices, $location, ngDialog, $window) {

        $scope.talent = talentResolved.data;
            $scope.array = [{ value: '1', text: '1' }, { value: '2', text: '2' }, { value: '3', text: '3' }, { value: '4', text: '4' }, { value: '5', text: '5' }];

   }]);

Model :

$scope.talent: Object
createdOn:    "2017-02-03T00:58:20.0999066"
employee    :    Object
fromAccount    :    Object
id    :130
inDate    :    "2017-02-01T05:30:00"
movedOutOfBench    :    false
outTill    :    "2017-05-02T05:30:00"
rating    :    2
remark    :    "asd"
resumePath    :    ""

What am I doing wrong? please provide me the code for a fix.

I was just trying that out to see the result. sorry forgot to revert that back. i dont have init in my code — Phoenix
– Phoenix, Commented Feb 3, 2017 at 4:53
Can you please explain this part -->I want the dropdown to display the value in the model by default. Perhaps a fiddle or pluker would be great.... — Nishant123
– Nishant123, Commented Feb 3, 2017 at 5:26
in the model, there is already a value for rating. in the JSON i have shared above, it has rating as 2. When i open the page, the dropdown list shows blank instead i want it to display the value in the model. — Phoenix
– Phoenix, Commented Feb 3, 2017 at 5:30
I don't have a clue how to create plunker. I will look in to it. sorry — Phoenix
– Phoenix, Commented Feb 3, 2017 at 5:50

Phoenix · Accepted Answer · 2017-02-03 07:32:10Z

Found a resolution.

HTML:

 <select ng-model="talent.rating" convert-to-number>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>

Controller :

myApp.directive('convertToNumber', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            ngModel.$parsers.push(function (val) {
                return val != null ? parseInt(val, 10) : null;
            });
            ngModel.$formatters.push(function (val) {
                return val != null ? '' + val : null;
            });
        }
    };
});

Even though i tried giving the values as numbers in array like :

$scope.array = [{ value: 1, text: '1' }, { value: 2, text: '2' }, { value: 3, text: '3' }, { value: 4, text: '4' }, { value: 5, text: '5' }];, angular was considering it as string. Don't know why.
When inspecting from console,it was like - https://hastebin.com/ugatisazey.vbs

The directive helped me fix the issue.

Collectives™ on Stack Overflow

select a value from model in a dropdown using angularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related