AngularJS ng-model selecting wrong `<option>`

Question

On my edit form i want the select box select with the value inserted in the database. i am using ng-model to select the value problem is that it always select the first option

from angular js

 $scope.form.language_id=2

my html select box

<div class="form-group row" >
    <label class="col-sm-2 text-right control-label col-form-label">{{phrase.Language}}</label>
    <div class="col-sm-10">
        <select  class="form-control" id="language_id" ng-model="form.language_id" name="language_id" required >
            <option ng-repeat="(key,value) in langs" value="{{value.id}}">{{value.languageTitle}}</option>
        </select>
    </div>
</div>

json image

point to notice is that it always selecting the first option dont know why

Generally recommended to use ng-options instead of ng-repeat to create the <option> elements — charlietfl
– charlietfl, Commented May 24, 2018 at 11:34

georgeawg · Accepted Answer · 2018-05-24 14:43:38Z

1

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.form={"language_id":2};
$scope.langs=[
{"id":1,"languageTitle":"test1"},
{"id":2,"languageTitle":"test2"},
{"id":3,"languageTitle":"test3"},
]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="form-group row" >
<label class="col-sm-2 text-right control-label col-form-label">{{phrase.Language}}</label>
<div class="col-sm-10">
<select  class="form-control" id="language_id" ng-model="form.language_id"
         name="language_id" required
         ng-options="lan.id as lan.languageTitle for lan in langs">
</select>
</div>
</div>
</div>

edited May 24, 2018 at 14:43

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered May 24, 2018 at 11:59

Sagar Raviprolu

1021 silver badge7 bronze badges

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

Comments

Marcus Höglund · Accepted Answer · 2018-05-24 12:01:30Z

1

Instead of using NgRepeat you should use the NgOptions directive which is build for the select tag.

Here's a working example

angular.module("app",[]).controller("optionCtrl", function($scope) {
  $scope.form = {};
  $scope.form.language_id = 2;
  $scope.langs = [
  { id: 1,languageTitle: 'Eng' },
  { id: 2,languageTitle: 'Swe' },
  { id: 3,languageTitle: 'Fra' }
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>


<div ng-app="app" ng-controller="optionCtrl" class="form-group row" >
	<label class="col-sm-2 text-right control-label col-form-label">{{phrase.Language}}</label>
	<div class="col-sm-10">
		<select class="form-control" 
				id="language_id" 
				ng-model="form.language_id" 
				name="language_id" 
				ng-options="item.id as item.languageTitle for item in langs"
				required >
		</select>
	</div>
</div>

answered May 24, 2018 at 12:01

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

1 Comment

Shahneel Ahmed Over a year ago

Marcus Höglund and Sagar Raviprolu you guyzzz solve by problem thankss alottttttttttttttttttttttttttttttttttttt

Community · Accepted Answer · 2020-06-20 09:12:55Z

The value attribute returns strings and the value.id is a number. Use ng-value without curly bracket {{ }} interpolation.

    <select  ng-model="form.language_id" name="language_id" required >
        <option ng-repeat="(key,value) in langs" ̶v̶a̶l̶u̶e̶=̶"̶{̶{̶v̶a̶l̶u̶e̶.̶i̶d̶}̶}̶
                ng-value="value.id">
           {{value.languageTitle}}
        </option>
    </select>

From the Docs:

In general, the match between the model and an option is evaluated by strictly comparing the model value against the value of the available options.

If you are setting the option value with the option's value attribute, or textContent, the value will always be a string which means that the model value must also be a string. Otherwise the select directive cannot match them correctly.

To bind the model to a non-string value, you can use one of the following strategies:

the ngOptions directive (select)

the ngValue directive, which allows arbitrary expressions to be option values (Example)

model $parsers / $formatters to convert the string value (Example)

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.form={"language_id":2};
$scope.langs=[
{"id":1,"languageTitle":"test1"},
{"id":2,"languageTitle":"test2"},
{"id":3,"languageTitle":"test3"},
]
});

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

    <select ng-model="form.language_id" name="language_id" required >
        <option ng-repeat="(key,value) in langs" ng-value="value.id">
           {{value.languageTitle}}
        </option>
    </select>

</body>

For more information, see

Collectives™ on Stack Overflow

AngularJS ng-model selecting wrong `<option>`

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related