select dropdown has first option blank in AngularJs

Question

I have dynamically created dropdown. Here is my code and output -

<select class="form-control"
    ng-init="option.id = conditions.fieldId"
    name="conditon_dropdown"
    ng-model="conditions.fieldId"
    ng-change="getOptionsChoice(conditions, conditions.fieldId)"
    ng-options="option.id as option.placeholder for option in attribute_values">
</select>

Output:

<select ng-options="option.id as option.placeholder for option in attribute_values" ng-change="getOptionsChoice(conditions, conditions.fieldId)" ng-model="conditions.fieldId" name="conditon_dropdown" ng-init="option.id = conditions.fieldId.toString()" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty">
  <option value="?" selected="selected"></option>
  <option label="Size" value="number:1">Size</option>
  <option label="Color" value="number:2">Color</option>
  <option label="Fit" value="number:3">Fit</option>
  <option label="Rise" value="number:4">Select Rise</option>
</select>

Here is automatically created <option value="?" selected="selected"></option> I want to selected my default first option <option label="Size" value="number:1">Size</option>

Edit: I have written $scope.conditions.fieldId = 1 this is working fine. But my option value dynamic. It may be string or integer. How to manage this in HTML without controller?

take a look http://stackoverflow.com/questions/17968760/how-to-set-a-selected-option-of-a-dropdown-list-control-using-angular-js — tratto, Sep 16 '16 at 11:07

score 2 · Accepted Answer · answered Sep 16 '16 at 11:08

2

Assign your first element of Array to the ng-model element, like this

If your array is attribute_values

$scope.ngModelElement = $scope.attribute_values[0].fieldId;

And define ng-model element in controller with $scope

answered Sep 16 '16 at 11:08

Rakesh Chand

3,105
1
20
41

Although this does work, according to the W3c example here : https://www.w3schools.com/angular/tryit.asp?filename=try_ng_select_repeat you shouldn't need to do this. This is my general problem with angular, so many of the examples and tutorials you see online just simply don't work when you try them in your own code and you end up having to look around for a different example or hacking away until you finally get it to work. It's just such a flaky technology. – user898465 Sep 17 '18 at 16:21

Mohit Tanwani · Answer 2 · 2016-09-16T11:21:53.577

You needed to set your initial model value to the actual object.

See the working example.

// Set by default the   value "carton"
$scope.selectedUserProfile= $scope.userProfiles[0];

var myApp = angular.module('myApp',[]);

function myCtrl ($scope) {
   $scope.userProfiles = [
     {id: 10, name: 'Carton'},
     {id: 27, name: 'Bernard'},
     {id: 39, name: 'Julie'},
  ];
 
  // Set by default the   value "carton"
  $scope.selectedUserProfile= $scope.userProfiles[0];
  
  $scope.userProfiles1 = [
     {id: 10, name: 'Carton'},
     {id: 27, name: 'Bernard'},
     {id: 39, name: 'Julie'},
  ];
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  Dropdown with first option selected
  <select  id="requestorSite" ng-model="selectedUserProfile" ng-options="userProfile as userProfile.name for userProfile in userProfiles">
  </select>
  <br/><br/>
  
  Dropdown with first option as blank
  <select  id="requestorSite1" ng-model="selectedUserProfile1" ng-options="userProfile as userProfile.name for userProfile in userProfiles1">
  </select>
  </div>

select dropdown has first option blank in AngularJs

2 Answers2