Question

在我的表单中我有一些输入，这是我的自定义指令和一些文本字段。另外我有按钮：第一个用于“向表单添加新输入”，它绑定到我的控制器中的函数$scope.AddNewItem()，第二个用于“从表单中删除输入”，绑定到函数$scope.RemoveItem(index_of_item)。当我输入文本字段并按Enter键时出现问题 - 输入值被删除，因为$scope.RemoveItem(index_of_item)被称为自身。我确定我没有打电话给它，因为即使Call Stack也没有显示我能做到的地方。有没有人有同样的问题？

<div class="form-group " ng-repeat="(i, user) in users">
    <div class="col-sm-5" style="padding-right: 0px; margin-top: 0px">
        <div typeahead ng-model="users[i]"> </div>
    </div>
    <div class="col-sm-2 ng-scope" style="padding-left: 5px; margin-top: 0px">
        <button ng-click="removeUserInput(i)" class="btn pull-right m-t-n-xs remove-input">
            <i>
                    <span class="glyphicon glyphicon-minus" style="color: white;"></span>
                </i>
        </button>
        <button ng-click="addUserInput()" class="btn pull-right m-t-n-xs add-input">
            <i>
                    <span class="glyphicon glyphicon-plus" style="color: white;"></span>
                </i>
        </button>
    </div>
</div>

我的控制器代码：

   $scope.addUserInput = function () {
        $scope.users.push({});
    };

    $scope.removeUserInput = function (index) {
        if ($scope.users.length > 1) {
            $scope.users.splice(index, 1);
        }
        else if ($scope.users.length == 1) {
            $scope.users[0] = {};
        }
    };

Answer 1

只需使用以下代码更新您的代码...... 问题是您错过了按钮的 type =＆＃34;按钮＆＃34; 。

   <div class="form-group " ng-repeat="(i, user) in users">
       <div class="col-sm-5" style="padding-right: 0px; margin-top: 0px">
           <div typeahead ng-model="users[i]">
           </div>

           <div class="col-sm-2 ng-scope" style="padding-left: 5px; margin-top: 0px">
           <button type="button" ng-click="removeUserInput(i)" class="btn pull-right m-t-n-xs remove-input">
              <i>
              <span class="glyphicon glyphicon-minus" style="color: white;"></span>
              </i>
            </button>

           <button type="button" ng-click="addUserInput()" class="btn pull-right m-t-n-xs add-input">
              <i>
              <span class="glyphicon glyphicon-plus" style="color: white;"></span>
              </i>
           </button>
         </div>
       </div> 
    </div>

Answer 2

万一你好奇为什么会以这种方式发生，

每当您在enter内按form时，表单提交操作将与提交按钮onclick事件一起触发。



没有type属性的按钮的行为类似于submit按钮。

在您的代码中，您没有为按钮指定type属性，因此每当您按Enter键时

它将尝试执行提交按钮的onclick事件。
然后它将尝试执行表单提交事件

在您的情况下，由于您没有为按钮指定type属性，因此即使您没有单击按钮，也会执行按钮onclick事件，这是您$scope.RemoveItem(index_of_item)函数正在执行的原因。

演示

没有type属性

执行按钮onclick事件以及表单提交事件

<form onsubmit="javascript:alert('hi from form onsubmit')">
  <input type="text">
  <button onclick="javascript:alert('hi from button onclick')">click</button>
</form>

使用type属性（已修复）

<form onsubmit="alert('hi from onsubmit')">
<input type="text">
<button type="button" onclick="alert('hi from button onclick')">click me</button>

AngularJS函数在表单中调用自身

2 个答案:

演示