2017-07-14 283 views
0

我试图将ng-change添加到运行datetimepicker的输入,但它会在页面加载时触发更改功能。下面是代码eonasdan datetimepicker,在页面加载时触发的更改事件

<input datetimepicker ng-model="startDate" 
     ng-change="testFunction()" 
     options="cOptions" 
     placeholder="Select Date"/> 

任何想法如何防止这种情况?

编辑:

$scope.testFunction = testFunction; 
function testFunction(){ 
    console.log('on change') 
} 

loadData(); 

function loadData(){ 
    //this is where startDate is set 
} 
+0

您是否在负载控制器上设置其值?您在该输入字段中看到的初始值是什么? – Shantanu

+0

@Shantanu在页面加载时,我从数据库中获得价值 – user1751287

+0

尝试向其中添加'ng-if =“startDate”',并且仅当从服务器返回数据时才将值保存到'$ scope.startDate' –

回答

0

喜在你使用的指令由插件触发其中输入字段,它明确地将其设置为null的变化。因此,您可以进行验证,直到填充的输入字段不执行您在ng-change函数上编写的逻辑。有两种方法可以做到这一点:

<div class="input-group"> 
    <input class="form-control" datetimepicker ng-model="vm.date" options="vm.options" 
    ng-change="vm.date && vm.changed()"/> 
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"> 
    </span></span> 
</div> 

现在这里ng-change将不会触发,直到你插入字段中的东西。所以onload它不会被触发。 其他的方法就好像不是用它的ng-change函数来调用这个scope变量,如果这个值为null或者不是,你可以检查那个函数。如果它不是null,那么只运行ng-change上写的实现。

这里的plunker出两个条件: http://plnkr.co/edit/uCf2vpmoYIYzxTjmFVcX?p=preview

更新:如果您正在编辑值onload事件,但仍然不想执行你的NG-变化写入实现,那么有独立的变量,在切换其价值第一次ng-change,由于指令而自动触发,接下来的改变,你的ng-change函数将会运行。 http://plnkr.co/edit/FogYzmDBd1gIolvjP7yl?p=preview

+0

我没有看到你填写的日期页面加载 – user1751287

+0

即使这不起作用由于某种原因 – user1751287

+0

http://plnkr.co/edit/e74vE1ScYUPYJfhD1CSA?p=preview这应该为你工作 – Shantanu

相关问题