How to add placeholder in ng-repeat dropdown input box?

Question

I am implementing one drop-down with ng-repeat. I want to add place holder in input box, Because first time it is blank(without selecting the drop-down option). So I want to set by default placeholder. I don't want leave blank drop-down input box.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

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

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

Possible duplicate of [Placeholder for select with AngularJS](https://stackoverflow.com/questions/42766564/placeholder-for-select-with-angularjs) — Dinesh undefined, Jan 03 '18 at 06:09

score 1 · Answer 1 · answered Jan 03 '18 at 06:12

1

add an option

 <select ng-model="selectedName" ng-options="x for x in names">
      <option disabled selected value>Please Select</option>
    </select>

answered Jan 03 '18 at 06:12

jose

1,024
10
31

score 0 · Accepted Answer · answered Jan 03 '18 at 06:08

You can add an option

<option value="" disabled selected>Please Select</option>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["","Emil", "Tobias", "Linus"];
});

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

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
<option value="" disabled selected>Please Select</option>
</select>

</div>

please explain what is the reason for adding empty element at the first position of the array — Ritesh Ranjan, Jan 03 '18 at 06:34

score 0 · Answer 3 · answered Jan 03 '18 at 06:09

you can set a default value uisng ng-init in your select .

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

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

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-init="selectedName = names[0]" 
    ng-model="selectedName" 
    ng-options="x for x in names">
</select>

</div>

score 0 · Answer 4 · answered Jan 03 '18 at 06:09

You could try like this .

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

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

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
<option value="" selected>Please select</option>
</select>

</div>

score 0 · Answer 5 · answered Jan 03 '18 at 06:09

Add option disabled here:

<option disabled selected value>Select here</option>

Code: https://codepen.io/anon/pen/YYxzxj

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

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

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
  <option disabled selected value>Select here</option>
</select>

</div>

How to add placeholder in ng-repeat dropdown input box?

5 Answers5