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提交的意外行爲輸入

回答

相關問題