如何解决如何在 AngularJS 自定义指令中使用 ng-options 和 ng-model
我正在尝试从 html 代码中封装一些下拉列表,这是我的 html 代码
<custom-dropdown function="foo" data="{{application}}" target="toBeUsedLater">
</custom-dropdown>
这是我的 customDropdown 自定义指令代码:
'use strict';
angular.module('sample')
.directive('customDropdown',function () {
return {
restrict: 'E',scope: {
data: '@',function: '&',target: '@',},link: function (scope,element,attrs) {
function insertList(obj) {
var model = scope.function()(obj);
const list = document.createElement('select');
//here I want to set the ng-model to whatever target passed in
list.setAttribute('ng-model',scope.target);
//model is a local var,I do not know how to make it work for ngOptions
list.setAttribute('ng-options',"item for item in model")
element.append(list);
}
element.on('load',insertList(scope.data));
}
};
});
基本上,我想使用基于本地创建的列表的 ngOptions,并且我想为列表分配一个作为“目标”传入的 ngModel,在这种情况下,它被称为“toBeUsedLater”。目的是为了在使用这个自定义指令之后在一些html代码中使用toBeUsedLater。
我尝试了一种笨拙的方法:
link: function (scope,attrs) {
function insertList(obj) {
var model = scope.function()(obj);
const list = document.createElement('select');
list.setAttribute('ng-model',scope.target);
//default option
const option = document.createElement('option');
option.setAttribute('value','');
option.textContent = '--Select--';
list.append(option);
for (let i of model) {
const option = document.createElement('option');
option.setAttribute('value',i);
option.textContent = i;
list.append(option);
}
element.append(list);
}
element.on('load',insertList(scope.data));
}
这会正确呈现列表,但仍然无法将“toBeUsedLater”指定为 ngModel。最好我想使用 ngOptions 因为它很整洁。感谢您的帮助,谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。