AngularJs强制操作DOM

需求描述:在弹出的模态页面上显示计时器

问题描述:模态页面的text框使用了ng-model绑定数据,controller中也使用了间隔调用来实现了计时器的具体逻辑,但是最后出现的问题是使用了间隔调用并且通过检测值发生改变但新值无法渲染到界面上,也就是说模态界面上的数据不能实时更新,而保留在初始化界面时的状态

解决办法:强制获取模态界面中的text框,给text控件定义一个id,通过angular.element(document.getElementById(id))来获取这个text控件对象,既然可以操作这个text的值

/**
* 获取id的代码
*/
var textview=                                                          angular.element(document.getElementById('textviewid'));

/**
* 计时器的逻辑(只实现了由秒到分)
*/
function addNum(){
   var  textview=
   angular.element(document.getElementById('textviewid'));
            var time=0;
            var arr=textview[0].value.split(':');
            time=parseInt(arr[1]);
            time=time+1;
            if(time==60){
                var minute=parseInt(arr[0])+1;
                minute=minute+"";
                if(minute.length<2){
                    minute=0+minute;
                }
                arr[1]='00';
                textview[0].value=minute+":"+arr[1];
            }else{
                time=time+"";
                if(time.length<2){
                    time='0'+time;
                }
                textview[0].value=arr[0]+":"+time;
            }
        };

结果展示

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值