Placeholder for select with AngularJS
25,929
Solution 1
You can use transclusion to add an extra option that is disabled and selected. See How do I make a placeholder for a 'select' box? for more background on that general solution. Here is the ngSelect documentation for reference, as well.
View
<div ng-controller="MyCtrl">
<select name="mySelect"
id="mySelect"
ng-options="option.name for option in refData track by option.id"
ng-model="selectedOption">
<option value="" disabled selected>View current values</option>
</select>
</div>
AngularJS application
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.refData = [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
];
$scope.selectedOption = "";
});
JsFiddle Demo
Solution 2
<select ng-model="testData" ng-options="test.name for test in testData">
<option value="" selected>View current values</option>
</select>
Given test data is:
$scope.testData = [{"name" : "John"}, {"name" : "Micheal"}, {"name" : "Sarah"}];
Solution 3
I suggest using ng-options
<select ng-options="d as d.value for d in refData" ng-model="refDataSelected"></select>
On your controller you can declare
$scope.refDataSelected = refData[0]
to use first element as default option
If you want to create a dummy text you can add a new object to refData with custom text and give it an unreal id like -1. But when you submit you should check whether its id is -1 or not.
Author by
user441521
Updated on February 19, 2020Comments
-
user441521 about 4 years
I can't get a placeholder idea with select. With the below the first entry is still blank.
<select class="form-control" ng-model="refData" required> <option ng-repeat="d in refData"> {{d.value}} </option> <option value="" disabled hidden selected>View current values</option> </select>
-
user441521 about 7 yearsI don't want to have the first one as the default. I want a message that says whatever I want it to say but it's not an option to select.
-
user441521 about 7 yearsInteresting that using ng-options worked but ng-repeat doesn't. Oh well, thanks.