AngularJS提交的意外行为输入

我需要使用AngularJS的订单跟踪功能来制作一个简单的表单。我创建了以下jsfiddle：http://jsfiddle.net/MVVcf/2/AngularJS提交的意外行为输入

当我们第一次按下回车键时，提交正在工作，但第二个（和下一个）命中不起作用并清除了上述行中的所有项目。

奇怪的是，当我们随时点击“添加”按钮everythink效果很好。

HTML：

<div data-ng-app="OrderApp" data-ng-controller="OrderController" class="container"> 
<h1>Order</h1> 
<hr/> 
<form role="form" name="form" data-ng-submit="add(form)" novalidate> 
    <table class="table table-striped table-hover table-bordered"> 
     <thead> 
     <tr> 
      <th class="who" colspan="2">Who</th> 
      <th class="what">What</th> 
      <th class="actions">Actions</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr data-ng-repeat="item in order.items"> 
      <td><input type="checkbox" data-ng-model="item.selected" /></td> 
      <td data-ng-click="edit(item)">{{ item.who }}</td> 
      <td data-ng-click="edit(item)">{{ item.what }}</td> 
      <td style="text-align: center"> 
       <button data-ng-click="delete($index)" class="btn btn-xs btn-danger">&nbsp;x&nbsp;</button> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <input name="who" type="text" placeholder="kto..." data-ng-model="formData.who" autofocus data-focus-on="submitted" required class="form-control" /> 
       <div data-ng-show="submitted && form.who.$error.required">To pole jest wymagane</div> 
      </td> 
      <td> 
       <input name="what" type="text" placeholder="co..." data-ng-model="formData.what" required class="form-control" /> 
       <span data-ng-show="submitted && form.what.$error.required">To pole jest wymagane</span> 
      </td> 
      <td> 
       <button type="submit" class="btn btn-primary">Add</button> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</form>

JS：

angular.module('OrderApp', []) 
.directive('focusOn', function() { 
    return function(scope, elem, attr) { 
     scope.$on(attr.focusOn, function(e) { 
      elem[0].focus(); 
     }); 
    }; 
}) 
.controller('OrderController', ['$scope', function ($scope) { 
    $scope.submitted = false; 
    $scope.focus = true; 
    $scope.order = { 
     items: [] 
    }; 
    $scope.toggle = function (item) { 
     item.selected = !item.selected; 
    }; 
    $scope.add = function (form) { 
     if (form.$invalid) { 
      return; 
     } 
     $scope.order.items.push(angular.copy($scope.formData)); 
     $scope.submitted = false; 
     $scope.$broadcast('submitted'); 
     $scope.formData = null; 
    }; 
    $scope.delete = function ($index) { 
     $scope.order.items.splice($index, 1); 
    }; 
}]);

来源

2014-05-02 Karol Fiturski

每次按Enter键，您的删除功能正在被调用。因此，当您尝试通过在输入字段上按Enter键添加其他条目时，您刚添加到列表中的项目将被删除。

这是因为，当你按下回车键，将触发第一个提交按钮找到的点击...这是删除按钮，即使重点是在输入栏。但是，由于按钮的默认行为是“提交”，它将窃取您的注意力并执行基础功能（删除...）。

如果更改按钮的锚标签，它会很好地工作，外观上是一样的：

 <a data-ng-click="delete($index)" class="btn btn-xs btn-danger">&nbsp;x&nbsp;</a>

但是，如果你真的看中了它是一个按钮，就可以通过与值“按钮”按钮标记添加“类型”属性解决的问题：

 <button type="button"...

，这将防止偷你的焦点“提交”的行为。

来源

2014-05-02 15:52:04

http://jsfiddle.net/Qc9Fw/

假设你使用的是引导库，

Ç忌用：

<button data-ng-click="delete($index)" class="btn btn-xs btn-danger">&nbsp;x&nbsp;</button>

到：

<a data-ng-click="delete($index)" class="btn btn-xs btn-danger">&nbsp;x&nbsp;</a>

这看起来和感觉一样

的问题是，X按钮 '偷' 重点输入按键

来源

2014-05-02 15:37:04

AngularJS提交的意外行为输入

回答

相关问题