ng-click在输入类型提交中不起作用

时间:2015-01-24 14:34:06

标签: javascript angularjs ng-show

我编写了一个角度应用程序,其中包含一个输入类型为提交但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视图没有任何影响 哪里出错了?

1 个答案:

答案 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}}" />