Question

我正在使用使用刀片的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指令的按钮，表单将被提交。

Answer 1

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

所以而不是

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

试

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

Answer 2

为了澄清，<button>没有type属性的默认行为是提交表单。要使它只是一个简单的按钮而不提交，只需像这样添加type="button"：

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

Angular按钮调用表单提交按钮的原因不明

2 个答案: