zoukankan      html  css  js  c++  java
  • angular 动态加载 ng-model 监听值

      此问题出现于 ng-repeat 出来的单日期控件问题上,用的是插件,然后通过 angular 指令封装了一下,ng-model 绑定值监听并设置选中并回填。其实主要是多个控件一起使用会导致  ng-model 始终监听的都是页面绑死的那个定值,导致了各个控件的选中和回填出现混乱的 bug。

      首先看到问题时就发现了多个调用监听一个定值的问题,那么问题找到了,解决就有针对性了:只要将监听的值改成不同的值就行了,那怎么进行将 ng-model 值区分开呢?百度了好久其实都没查到有用的东西,查的类似:ng-model 绑定动态值。。。

      后来偶尔发现有一篇文章提到了 $compile ,这个服务可以注入,主要应用为:动态加载 html 内容。眼睛一亮,这不就是我想要的实现嘛!果断查了一下 $compile,不出所料,此服务可以使用这种方式来进行动态DOM生成:

    $scope.ngModel = 'date' + new Date().getTime();
    var ele = $compile("<input id='input1' ng-model=" + $scope.ngModel + ">")($scope);

      然后再进行向页面的添加:

    $element.append(ele);

      这样就可以底层动态绑定不一样的 ng-mdoel 监听值了!

      不过仅这样也还不够,我们最终需要动态生成元素后要插到相应的html页面位置,那又该如何呢?查到对应对应元素后再添加,,比如我们要向一个id为 d1 的 div 添加该元素,那么可以先找到所有div:

    var arr = $element.find('div');

      然后移除无用 div ,直至最后一个,再进行添加操作:

    for(var i = arr.length - 1; i >= 0; i--) {
        if(arr[i].id != 'd1') {
            arr.splice(i, 1);
        }
    }
    arr.append(ele);

      至此解决 bug 问题,待续~

  • 相关阅读:
    树点涂色
    搜索+DP的一波小水题
    洛谷 P2194 HXY烧情侣
    洛谷 P3119 [USACO15JAN]草鉴定Grass Cownoisseur
    走楼梯升级版(9.8 模拟赛。。。xxy原创)
    洛谷 P2966 [USACO09DEC]牛收费路径Cow Toll Paths
    Tyvj P2207 上学路线route
    cogs 2342. [SCOI2007]kshort
    洛谷 P2740 [USACO4.2]草地排水Drainage Ditches
    洛谷 P1318 积水面积
  • 原文地址:https://www.cnblogs.com/guofan/p/7760488.html
Copyright © 2011-2022 走看看