我的要求
需要使用angularjs 2类型记录在模型中加载jquery查询生成器。
我所做的
我在angularjs 2中创建了一个动态表单,其中包含3个选择框和1个文本框,在该文本框中单击其中的按钮,我已经在模式体内调用了引导模式,我编写了查询生成器,并在template_rule.html中为该查询生成器创建了内部java脚本。
发生了什么
当我单击文本框时,会弹出模态,在模态体内,只有三个按钮正在呈现,主查询生成器视图在不呈现中。
这是完全工作的演示链接(http://plnkr.co/edit/d38iwjLhJzTjM5t46zD7?p=preview)
演示链接功能
在这个链接中,左上角将有一个按钮,它将继续添加一组字段,如果单击该文本框,将出现一个文本框--一个模式将弹出,因为只有在呈现查询生成器时,按钮才会显示,但核心功能部分没有显示在该模式弹出中,查询生成器脚本在app/template_rule.html文件中,并且必要的库包含在index.html文件中,请帮助我解决这个问题。
这是完整代码代码的一部分,请参阅上面的链接。
import {Component} from 'angular2/core';
import {
FORM_DIRECTIVES, FormBuilder, ControlGroup, ControlArray, Validators, NgForm, Control,
AbstractControl
}from 'angular2/common';
@Component({
selector: 'my-app',
templateUrl:'app/template_rule.html',
directives: [FORM_DIRECTIVES]
})
export class AppComponent {
userForm: ControlGroup;
constructor(private fb: FormBuilder) {
this.userForm = fb.group({
rules_list: new ControlArray([])
});
this.rules_list();
}
rules_list(){
this.userForm.controls['rules_list'].push(this.fb.group({
select_state: this.fb.control("",Validators.required),
rules: this.fb.control("", Validators.required),
pass_state: this.fb.control("", Validators.required),
fail_state: this.fb.control("", Validators.required)
}));
}
removeRules(ctrl) {
let rulesLists = (<Array>(<ControlGroup>this.userForm.controls['rules_list']).controls);
for(var i = 0; i < rulesLists.length; i++) {
console.log("each rules", ctrl);
if(rulesLists[i] == ctrl) {
console.log("rules to remove", rulesLists[i]);
rulesLists.splice(i, 1);
(<ControlGroup>this.userForm.controls['rules_list']).updateValueAndValidity();
break;
}
}
}
submitRules() {
console.log(this.userForm.value)
}
}发布于 2016-06-28 12:44:26
当模板加载时,通过在角2中动态加载查询生成器脚本文件来解决这个问题。
下面是动态加载的代码
load_script(){
var head=document.getElementByTagName('head')[0];
var script=document.createElement('script');
script.type='text/javascript';
script.src='js file url'
head.appendChild(script);
}https://stackoverflow.com/questions/38074595
复制相似问题