CODEWITHSUNDEEP
htmlangularjs
e.k
e.k

Reputation: 1363

Angualrjs <select> ng-model adds strange string

In my angular js application I have used as follows

<select id='baseline' class="form-control" ng-model='vm.modal.baseline'>
   <option ng-repeat='base in vm.baseline' ng-value='base'>{{base}}</option>
</select>

Then in my controller 

vm.baseline = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
vm.modal = {baseline: '3'};

but select is not defaulting to 3 instead it adds

<option value="? string:3 ?"></option>

What should I do to set the default value as 3? Thank you.

Upvotes: 0

Views: 67

Answers (3)

JayDee
JayDee

Reputation: 33

There is a problem with your controller AS syntax, it is working correctly with $scope see the eg with your code.

https://jsfiddle.net/6r5Lnasb/ 

<div ng-app ng-controller="LoginController">    
    <select id='baseline' class="form-control" ng-model='modal.baseline'>
   <option ng-repeat='base in baseline' ng-value='base'>{{base}}</option>
</select>
</div>

function LoginController($scope) {
    $scope.baseline = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
$scope.modal = {baseline: '3'};
}

Upvotes: 1

Yash Chavda
Yash Chavda

Reputation: 921

Try replacing these two lines 

vm.baseline = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
vm.modal = {baseline: '3'};

with below lines

vm = {
 baseline: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
 modal:  {
  baseline: '3'
 }
}

As the variable vm is not defined/declared something like var vm; or var vm = {}; or var vm = null assigning an array value or any value to a property of an undefined variable will throw an error hence it was not working.

if you have seen your browser console you might have got some similar looking error: TypeError: Cannot set property 'baseline' of undefined

Upvotes: 0

user3984210
user3984210

Reputation:

It doesn't work because ng-model value is a string and option value is number.
Change vm.modal = {baseline: 3}; or convert baseline to array of strings vm.baseline = ['1', '2', '3' ...];

Upvotes: 0

Related Questions