Menu
UPDATE 1: developed the first sample code to set the basis for correct implementation.
UPDATE 2: developed a working model. See answers.
I found this library:
https://libraries.io/bower/editable-dropdown-angularjs
which allows adding editable dropdown list using HTML5 datalist feature.
It works fine, however, the only needed feature is to make the field editable only if the selected value is "Other".
See working sample in plunkr.co vreated based on the demo from the repository
http://plnkr.co/edit/wDm2mbTqTsT1YC5H7UPy?p=preview
See sample code below for details.
Appreciate your suggestions to make the dropdown field editable only if the selected value is "Other".
HTML5:
<div ng-app="myApp">
<div ng-controller="demo" style="width:300px;position:fixed;top:20px;left:20px">
<p>You selected {{selected}}</p>
<editable-dropdown options='list' ng-model='selected'></editable-dropdown>
</div>
</div>
JavaScript:
angular.module('myApp', ['editableDropdown'])
.controller('demo', function($scope){
$scope.list = ['one', 'two', 'other']
$scope.selected;
});
I was able to develop this sample code using jsfiddle (based in this answer):
http://jsfiddle.net/tarekahf/t392djx1/
Which will allow making the dropdown list editable if "Other" is selected. Now, I am converting this mode to the Angular way. If you have any suggestion, please let me know.
633
asked Jun 01 '26 08:06
Seems like you are not attracting too much attention to your question and as I commented, you'd (still) be better off writing your own implementation rather than trying to force editable-dropdown-angular to your needs.
Anyway, I took liberty of writing my own editable-select directive for you.
Directive takes array of options to choose from and optional other string, which is default value for user-editable selection. Editing is disabled while choosing from options, while other can be freely modified.
Hope you find it useful.
App HTML template
<body ng-controller="Ctrl as vm">
<!-- directive -->
<editable-select
ng-model="vm.selected"
options="vm.options"
other="Other"> <!-- write "other" here or assign var in controller -->
</editable-select>
<hr>
<span>User selected: {{ vm.selected }}</span>
</body>
App JavaScript
angular
.module('app', [])
.controller('Ctrl', function() {
var vm = this;
vm.options = ['One', 'Two']; // selection options
})
.directive('editableSelect', function() {
return {
restrict: 'E',
require: '^ngModel',
scope: {
ngModel: '=',
options: '=',
other: '@'
},
replace: true,
templateUrl: 'editable-select-tpl.html',
link: function(scope, element) {
scope.isDisabled = true;
// option clicked handler
scope.click = function(option) {
scope.ngModel = option;
scope.isDisabled = !scope.other || scope.other !== option;
if (!scope.isDisabled) {
element[0].querySelector('.editable-select').focus();
}
};
// option typed handler
var unwatch = scope.$watch('ngModel', function(val) {
if (!scope.isDisabled) {
scope.other = scope.ngModel;
}
});
// release watcher
scope.$on('$destroy', unwatch);
}
};
});
Directive HTML template (editable-select-tpl.html)
<div>
<div class="input-group dropdown">
<input name="editable-select"
type="text"
class="form-control dropdown-toggle editable-select"
ng-disabled="isDisabled"
ng-model="ngModel">
<ul class="dropdown-menu">
<li ng-repeat="option in options"
ng-bind="::option"
ng-click="click(option)">
</li>
<li ng-if="other" role="presentation" class="divider"></li>
<li ng-if="other" ng-bind="other" ng-click="click(other)"></li>
</ul>
<span class="input-group-addon dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</span>
</div>
<span class="small text-muted" ng-show="!isDisabled">Type in your selection</span>
</div>
CSS
input[name="editable-select"]:disabled {
background-color: #ffffff;
}
.dropdown-menu:hover {
cursor: pointer;
}
.dropdown-menu li {
padding-left: 10px;
}
.dropdown-menu li:hover {
background-color: #eeeeee;
}
Related plunker here https://plnkr.co/edit/7bVgDW
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
