美文网首页我爱编程
angualr1动态生成ng-model

angualr1动态生成ng-model

作者: 帅得不够明显 | 来源:发表于2018-04-21 21:51 被阅读0次

    动态表单生成,ng-model也是动态的,但是ng-model里面只能放字符串,导致ng-model无法动态生成,网上很多例子但是在实际中都无法达到动态生成的需求。自己研究发现angular有一个$compile服务,运用这个就能达到我们的需求,废话不多说直接上代码。


    html


    js


    先将html代码用字符串拼接起来,容纳后插入到form表单中,最后将这段我们拼接成的代码用$compile服务注入到当前controller的$scope中,也就是$compile($('.main'))($scope)这段代码。

    但是要注意了append进去直接使用$compile($('.main'))($scope),ng-model生效了,但是angular的表单验证没有生效,那是因为append进来之后立马使用$compile没有获取到dom对象,所以我加了一个$timeout。实际项目中建议不要再angular中使用jquery,可以使用angular的自定义指令,我这里使用主要是为了便于演示。


    页面效果

    表单验证

    相关文章

      网友评论

        本文标题:angualr1动态生成ng-model

        本文链接:https://www.haomeiwen.com/subject/fiyakftx.html