单击angularjs中的按钮时如何防止表单提交？

Question

嗨，我正在用angularjs开发Web应用程序。 我设计了一种带有一些文本框和多种选择dropodwn的窗体。 我用下面的链接来建立多选择dropodwn。

http://embed.plnkr.co/xWvfWYjaW7TThKZONkv5/

以下是我的多选dropodwn。

<multiselect class="" multiple="true"
    ng-model="selectedCar"
    options="c.Location for c in locations"
    change="selected()" name="location" ng-required="true">
</multiselect>

我也有一些文本框如下。

<div>
    <span class="ang-error" style="color:#fff" ng-show="form2.IDCopyNo.$dirty && form2.IDCopyNo.$invalid ">
    <span ng-show="form2.IDCopyNo.$invalid && form2.IDCopyNo.$dirty">* {{'Required' | translate}}</span>
    </span>
</div>
<input class="with-icon" type="text" name="IDCopyNo" ng-model="IDCopyNo" required my-maxlength="32">

下面是我的完整代码。

<form name="form2" novalidate >
  <div class="inputblock" ng-class="{ 'has-error' : ((form2.$submitted && form2.location.$invalid)  || (form2.location.$invalid && form2.location.$dirty))}">
    <div>
      <span class="ang-error" style="color:#fff" ng-show="form2.location.$dirty">Select Location</span>
    </div>
    <multiselect class="" multiple="true" ng-model="selectedCar" options="c.Location for c in locations" change="selected()" name="location" ng-required="true">
    </multiselect>
  </div>
  <div class="inputblock" ng-class="{ 'has-error' : ((form2.$submitted && form2.IDCopyNo.$invalid )|| (form2.IDCopyNo.$invalid && form2.IDCopyNo.$dirty))}">
    <label class="inputblock-label" ng-show="user.IDCopyNo">{{ 'IDCopyNo' | translate }}</label>
    <div>
      <span class="ang-error" style="color:#fff" ng-show="form2.IDCopyNo.$dirty && form2.IDCopyNo.$invalid ">
       <span ng-show="form2.IDCopyNo.$invalid && form2.IDCopyNo.$dirty">* {{'Required' | translate}}</span>
      </span>
    </div>
    <input class="with-icon" type="text" name="IDCopyNo" placeholder="{{ 'IDCopyNo' | translate }}" ng-model="IDCopyNo" required my-maxlength="32">
  </div>
  <input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="saveDetail()">
</form>

现在的问题是，每当我不在文本框中输入值时，如果我单击多选dropodwn，则我的文本框验证就会触发。 当我单击提交按钮时，验证应该触发。 我可以知道如何解决这个问题吗？ 谢谢。

Answer 1

如果您使用的是jquery，则可以使用prevent default来实现您所追求的目标：

jQuery("a").click(function(event){
    event.preventDefault();
});

据我所知， ng-click指令创建$event变量，该变量在当前作用域中可用。 可以引用Java Script事件，然后将其用于调用stopPropagation 。

<button class="btn" ng-click="$event.stopPropagation();">
    Delete
</button>