Question

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

当我们第一次提交输入时按Enter键，但第二次（和下一次）命中不起作用并清除上面行中的所有项目。

奇怪的是，当我们总是点击“添加＆＃39;按钮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);
    };
}]);

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 按钮＆＃39;偷走了＆＃39;关注输入键按

Answer 2

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

这是因为当你按Enter键时，它会触发点击它找到的第一个“提交”按钮......即使焦点位于输入字段上，也就是“删除”按钮。但是，由于按钮的默认行为是＆＃34;提交＆＃34;，它将窃取您的焦点并执行基础功能（删除...）。

如果您将按钮更改为Anchor标签，它将完美地工作，外观应该是相同的：

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

但是，如果您真的想要它是一个按钮，您可以通过添加＆＃34;类型＆＃34;来解决问题。属性值为＆＃34;按钮＆＃34;到Button标签：

      <button type="button"...

这将阻止＆＃34;提交＆＃34;偷走焦点的行为。

输入时AngularJS提交的意外行为

2 个答案: