我试图从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,我想给列表分配一个作为“target”传入的ngmodel,在这种情况下,它被称为“tobeusedlater”。目的是在使用此自定义指令之后,在某些html代码中使用tobeusedlater。
我尝试了一种更笨拙的方式:
link: function (scope, element, 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,因为它很整洁。非常感谢您的帮助,谢谢!
暂无答案!
目前还没有任何答案,快来回答吧!