angularjs - AngularJS 在输入时提交的意外行为

Question

我需要使用 AngularJS 制作具有订单跟踪功能的简单表单。我创建了以下 jsfiddle:http://jsfiddle.net/MVVcf/2/

当我们第一次点击 Enter 时提交有效，但第二次(和下一次)点击无效并清除上面行中的所有项目。

奇怪的是，当我们总是点击“添加”按钮时，一切都很好。

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);
    };
}]);

Answer 1

http://jsfiddle.net/Qc9Fw/

假设您正在使用 Bootstrap 库，

改变了:

<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 按钮“窃取”了 Enter 按键的焦点