I am currently working on developing an AngularJS Directive for handling the prompts of a <select> input. There are 3 different modes that I am implementing:
- Disallowing a blank option
- This is the default mode
- Allowing a blank option with no text
- This can be achieved by setting
allow-blank="true"within the directive
- This can be achieved by setting
- Allowing a blank option with prompt text
- This can be achieved by setting
allow-blankto any value other than"true"
- This can be achieved by setting
However, it seems that the blank options are not appearing.
Check out the demo on Plunker
Template
<select ng-options="tag.id as tag.name for tag in myTags">
<option ng-if="allowBlank === 'true'" value=""></option>
<option ng-if="allowBlank && allowBlank !== 'true'" value="">{{allowBlank}}</option>
</select>
Directive
myApp.directive('mySelector', ['$http', function($http) {
return {
templateUrl:'my-selector-template.html',
restrict: 'E',
scope: {
allowBlank: '@?'
},
replace: true,
controller: function ($scope) {
$scope.myTags = [
{"name":"aliquam in","id":1},
{"name":"massa velit","id":2},
{"name":"nec vestibulum","id":3}
];
}
};
}]);