Angular 按钮正在调用表单提交按钮，原因不明答案

【问题标题】：Angular button is calling form submit button for unknown reasonAngular 按钮正在调用表单提交按钮，原因不明
【发布时间】：2016-04-16 23:44:41
【问题描述】：

我正在使用 Laravel，它使用刀片，并且我有一个带有表单的视图。我正在使用刀片打开和关闭表单，并且在表单中我还使用 angular 在用户与其交互时更新表单的某些部分。我在表单中有一个按钮，它触发了一个角度控制器方法，但是一旦控制器方法运行，表单提交动作就会被触发。我不明白为什么单击角度按钮时要提交表单。你能帮忙吗？

这是我的 Html（带刀片）：

{!! Form::open([$category = new \App\Category, 'url' => 'categories']) !!}
<div class="container" ng-app="catApp" ng-controller="catController">
    <div class="form-group">
        {!! Form::label('name', 'Name:') !!}
        {!! Form::text('name', null, ['class' => 'form-control']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('category_parent', 'Parent Category:') !!}
        {!! Form::select('category_parent', $categories, null, ['id' => 'category_list', 'class' => 'form-control']) !!}
    </div>

    <label for="singleSelect"> Single select: </label><br>
    <select name="singleSelect" ng-model="data.singleSelect" ng-options="cat.id as cat.name for cat in selectOptions" ng-change="change(data.singleSelect)">

    </select><br>
    <button ng-click="upOneLevel()">back</button>



    <tt>singleSelect = <%data.singleSelect%> </tt>

    <div class="form-group">
        {!! Form::submit($submitButtonText, ['class' => 'btn btn-primary form-control']) !!}    
    </div>
</div>
{!! Form::close() !!}

这是我的角度控制器：

function catController ($scope, commentFactory) {
    $scope.data = {
    singleSelect: null,
   };

   $scope.grandParentId = null;

   $scope.change = function ($parentId) {
    $scope.grandParentId = $scope.selectOptions[$parentId - 1].parent_id;
    commentFactory.get($parentId)
        .success(function(data) {
            $scope.selectOptions = data;
        });
   };

   $scope.upOneLevel = function() {
      commentFactory.get($scope.grandParentId)
        .success(function(data) {
            $scope.selectOptions = data;
        });
      $scope.grandParentId = $scope.selectOptions[$scope.grandParentId - 1].parent_id;
   };

   commentFactory.get(null)
        .success(function(data) {
            $scope.selectOptions = data;
        });
}

当我在执行 upOneLevel 后单击带有 ng-click 指令的按钮时，表单被提交。

【问题讨论】：

标签： javascript angularjs forms laravel-5.1 blade

【解决方案1】：

澄清一下，没有type 属性的<button> 的默认行为是提交表单。要让它成为一个简单的按钮而不提交，只需添加type="button"，如下所示：

<button type="button" ng-click="upOneLevel()">back</button>

【讨论】：

【解决方案2】：

使用<input type="button"/> 代替按钮标签。 <button> 将隐式提交表单。

所以不是

<button ng-click="upOneLevel()">back</button>

试试

<input type="button" value="back" ng-click="upOneLevel()"/>

【讨论】：

谢谢！那解决了它。我不知道
很高兴我能帮上忙 :)