CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-ng-repeat
Varun Sharma
Varun Sharma

Reputation: 4842

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

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>

Upvotes: 0

Views: 921

Answers (5)

jose
jose

Reputation: 1054

add an option 

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

Upvotes: 1

Nikhil Eshvar
Nikhil Eshvar

Reputation: 495

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>

Upvotes: 0

Dinesh undefined
Dinesh undefined

Reputation: 5546

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>

Upvotes: 0

zabusa
zabusa

Reputation: 2719

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>

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222672

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>

Upvotes: 0

Related Questions