AngularJS select not showing selected value

Question

Controller

$scope.industries= [
 {
  id: 1,
  name: "Name1", 
 }, {
  id: 2,
  name: "Name2"
 }
];

When assign $scope.filling_type = 2 in controller,I want to select "Name2" option in the select.

View

<select ng-model="filling_type">
  <option ng-repeat="industry in industries"
  ng-value="industry.name">{{industry.name}}</option>
</select>

In this case no option selected.

Isn't it for the capital "I" in {{Industry.name}} ?

Sajjad Shahi
– Sajjad Shahi

2018-09-04 12:08:13 +00:00
Commented Sep 4, 2018 at 12:08 — Sajjad Shahi
– Sajjad Shahi, Commented Sep 4, 2018 at 12:08
made that mistake when i post this.

Gayashan Perera
– Gayashan Perera

2018-09-04 12:11:16 +00:00
Commented Sep 4, 2018 at 12:11 — Gayashan Perera
– Gayashan Perera, Commented Sep 4, 2018 at 12:11

Chris Newman · Accepted Answer · 2018-09-04 13:17:58Z

2

I'd recommend getting used to ng-options in the select element instead of ng-repeating in the option element because of increased flexibility and performance. https://docs.angularjs.org/api/ng/directive/select#choosing-between-ngrepeat-and-ngoptions-

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.industries= [
 {
  id: 1,
  name: "Name1", 
 }, {
  id: 2,
  name: "Name2"
 }
];

$scope.filling_type = 2; // set default option here, using 2 from OP
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<select 
    ng-model="filling_type"
    ng-options="i.id as i.name for i in industries"> 
</select>
<p>Filling Type: {{filling_type}}</p>
</body>

edited Sep 4, 2018 at 13:17

answered Sep 4, 2018 at 12:53

Chris Newman

3,3121 gold badge20 silver badges21 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2018-09-04 12:11:04Z

1

Since you are binding name as value, you should set the name property as the filling_type

DEMO

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.industries= [
 {
  id: 1,
  name: "Name1", 
 }, {
  id: 2,
  name: "Name2"
 }
];

$scope.filling_type = "Name2";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<select ng-model="filling_type">
  <option ng-repeat="industry in industries"
  ng-value="industry.name">{{industry.name}}</option>
</select>
</body>

answered Sep 4, 2018 at 12:11

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Ramesh Rajendran Over a year ago

ng-value="industry.name" is needed now?

Collectives™ on Stack Overflow

AngularJS select not showing selected value

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related