我编写了一个角度应用程序,其中包含一个输入类型为提交但ng-click无效的表单
<div ng-show="!addDate && tk.doTime != null && tk.test2" class="change-item-btn" ng-click="addDate = true"> <span class="add-on"><i class="icon-time"></i></span>{{tk.doTime}}</div>
<form class="dateForm" ng-show="addDate" style="background-color:#dbf8f8;color: #152626; padding: 20px 20px 50px; margin-top:10px;" >
<div style="display:inline-block;width:50%;">
delivery
<div class="control-group">
<div class="controls">
<div class="input-append">
<input name="date" class="input-small datepicker form-control" placeholder="date" type="text" style="color:black" />
</div>
</div>
</div>
</div>
<div style="display:inline-block;width:50%;">
delivery time
<div class="input-append bootstrap-timepicker">
<input name="clock" style="color:black;direction:ltr;text-align:center" class=" input-small timepicker form-control" type="text">
</div>
</div>
<button ng-click="addDate = false" class="sbmtInput">cancel</button>
<input name="submit" type="submit" ng-click="deleting()" value="action" class="sbmtInput addDateTo" rel="{{tk.id}}-{{index}}-{{list.id}}" />
</form>
删除功能
$scope.deleting= function(){
$scope.addDate = false;
}
addDate值更改为false但对html视图没有任何影响 哪里出错了?
答案 0 :(得分:2)
这是因为ng-click在带有ng-show和提交输入的div中。 当您单击该事件两次并在divs ng-click时,addDate再次设置为true。 为了使这项工作,你应该防止在输入中传播。 为此,请使用范围$ event对象中提供的stopPropagation方法。 所以输入代码应该是:
<input name="submit" type="submit" ng-click="deleting(); $event.stopPropagation();" value="action" class="sbmtInput addDateTo" rel="{{tk.id}}-{{index}}-{{list.id}}" />