Initializing select with ng-options, ng-repeat and ng-selected in AngularJS

Question

I'm trying to get a select to start off with one option pre-selected using AngularJS, i have only one problem when i submit form with pre-selected option nothing happen and i have POST 400 (BAD REQUEST), problem vanish when i select options manually and form submitted successfully.

Here's the HTML:

<form role="form" novalidate >
<div class="form-group">
    <select id="id_level" name="level" class="form-control" ng-model="level" >
        <option ng-repeat="level in levels" ng-selected="{{level.name =='Low'}}" value="{{level.name}}">Level : {{level.name}}
        </option>
    </select>
</div>

and the JS:

var app = angular.module('risk', []);
  app.controller('RiskLevels', ['$scope', function($scope) {
    $scope.levels = [
      {name : "Low"},
      {name : "Medium"},
      {name : "High"}
    ];
  }]);

the problem is the option value="? undefined:undefined ?" created by angular in HTML

<select id="id_level" name="level" class="form-control ng-pristine ng-valid ng-touched" ng-model="level">
  <option value="? undefined:undefined ?"></option>
  <!-- ngRepeat: level in levels -->
  <option ng-repeat="level in levels" ng-selected="true" value="Low" class="ng-binding ng-scope" selected="selected">Level : Low</option>
<!-- end ngRepeat: level in levels -->
  <option ng-repeat="level in levels" ng-selected="false" value="Medium" class="ng-binding ng-scope">Level : Medium</option>
<!-- end ngRepeat: level in levels -->
  <option ng-repeat="level in levels" ng-selected="false" value="High" class="ng-binding ng-scope">Level : High</option>
<!-- end ngRepeat: level in levels -->
</select>

JS Fiddle: http://jsfiddle.net/faridmax/nrybr0rf/1/

score 1 · Accepted Answer · edited May 23 '17 at 12:25

1

This stackoverflow question will explain why there is an empty option

Why does AngularJS include an empty option in select?

To fix your problem, add this:

$scope.level = $scope.levels[0].name;

Full fiddle: http://jsfiddle.net/nrybr0rf/2/

edited May 23 '17 at 12:25

Community

1
1

answered Sep 09 '15 at 09:21

vinhboy

8,542
7
34
44

it work in JS Fiddle but in my app my ng-model="risk.level" and in my controller : $scope.update_risk_level = function(risk, item) { risk.level = item; risk.$update(function() { $rootScope.$broadcast("onRiskUpdate", risk); }); }; – faridmax Sep 09 '15 at 10:31

score 0 · Answer 2 · answered Sep 09 '15 at 09:12

HTML

<div class="col-md-3" ng-app="risk">
                <div class="form-group" ng-controller="RiskLevels">
                    <select id="id_level" name="level" class="form-control"  ng-model="selectedLevel" ng-options="item.text for item in levels"/>
                     <option value=''>Select</option>
                    </select>
                </div>
            </div>

Javascript

var app = angular.module('risk', []);
  app.controller('RiskLevels', ['$scope', function($scope) {
    $scope.levels = [
      {name : "Low", text: "Level: Low"} ,
      {name : "Medium", text: "Level: Medium"},
      {name : "High", text: "Level: High"}
    ];

    //initial default selected  
    $scope.selectedLevel = $scope.levels[0];

  }]);

Initializing select with ng-options, ng-repeat and ng-selected in AngularJS

2 Answers2