角度可编辑下拉菜单 - 根据所选值进行编辑 [英] Angular editable dropdown - make editable based on selected value
问题描述
更新1：开发了第一个示例代码，以设置正确实现的基础。
更新2：开发了一个工作模型。看到答案。
我找到了这个库：
此处相关的plunker https ：//plnkr.co/edit/7bVgDW
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.
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
这篇关于角度可编辑下拉菜单 - 根据所选值进行编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
