Question

首先我要说这不是一个重复的问题，我读了所有相关的问题！我的编辑功能工作正常，我的推送功能更新阵列工作正常，我确定我从未接触它，它只是停止工作！

我要说我的HTML表单中包含没有拼写错误的ng-model，用于帮助推送。角度代码：

                $scope.add = function(id){

                $scope.people.push({
                name: $scope.name, 
                phone1: $scope.phone1, 
                phone2: $scope.phone2,
                phone3: $scope.phone3,  
                email: $scope.email, 
                city: $scope.city,
                state: $scope.state    
            });
        //More code here that resets the forms input//
    }

我的编辑功能正常，我的删除功能正常，它就是这一个，当我点击按下add（）函数的按钮时，它会重置表单输入，但会将一个空白数组推入我的ng -repeat list！

我有一个包含多个输入的表单，其中ng-model设置为任意值; name，phone1 ......等，角度代码是正确的，为什么这不起作用呢？

<div class="centered" ng-show="addcont">
            <form id="adder" name="commentForm" method="post">
            <h2 class="formtitle">Add Contact</h2>
                <table cellpadding="5" cellspacing="5">
                <tr>
                <td>Name</td>
                <td>
                <input class="edit" type="text" ng-model="name">
                </td>
                </tr>
                <tr>
                <td>Email</td>
                <td>
                <input class="edit" type="text" ng-model="email">
                </td>
                </tr>
                <tr>
                <td>Phone</td>
                <td>
                <input type="text" id="number" class="edit" maxlength="3" size="3" ng-model="phone1">
                <input type="text" id="number" class="edit" maxlength="3" size="3" ng-model="phone2" /> -
                <input type="text" id="number" class="edit" maxlength="4" size="5" ng-model="phone3" />
                </td>
                </tr>
                <tr>
                <td>City</td>
                <td>
                <input class="edit" type="text" ng-model="city">
                </td>
                </tr>
                <tr>
                <td>State</td>
                <td>
                <input class="edit" type="text" ng-model="state">
                </td>
                </tr>
                <tr>
                <td>&nbsp;</td>
                <td>
                <input type="button" value="Save" ng-click="add();                                                                                            `showAdd()">
                </td>
                </tr>
                </table>
                </form>
            </div>

主要更新！

我使用JQuery autotab函数，一旦我将其注释掉，数组就会再次正常传入。
该功能在上面提供的表格中使用，并自动选项卡到下一个输入。

这里的功能是：

<script>
 $(document).ready(function(){
  $('.edit').autotab();
 });
</script>

Answer 1

每次使用Jquery和angular doest not

因此，我们应该使用自动选项卡的角度版本。

所以，这是使用带有Angular的自动选项卡的解决方案。

要添加的重要行是

$.autotab.selectFilterByClass = true;

＆＃13;

    $.autotab.selectFilterByClass = true;
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
    //$('.edit').autotab();
    $.autotab.refresh();
    $scope.people = [];
        $scope.add = function(id){
            $scope.people.push({
            name: $scope.name, 
            phone1: $scope.phone1, 
            phone2: $scope.phone2,
            phone3: $scope.phone3,  
            email: $scope.email, 
            city: $scope.city,
            state: $scope.state    
        });
            setTimeout(function () {
                $.autotab.refresh();
            }, 1);
    //More code here that resets the forms input//
        }
    });

＆＃13;

<!DOCTYPE html>
<html>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autotab/1.9.2/js/jquery.autotab.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<div class="centered">
    <form id="adder" name="commentForm" method="post">
    <h2 class="formtitle">Add Contact</h2>
    {{people}}
        <table cellpadding="5" cellspacing="5">
        <tr>
        <td>Name</td>
        <td>
        <input class="edit" type="text" ng-model="name">
        </td>
        </tr>
        <tr>
        <td>Email</td>
        <td>
        <input class="edit" type="text" ng-model="email">
        </td>
        </tr>
        <tr>
        <td>Phone</td>
        <td>
        <input type="text" id="number" class="edit number" maxlength="3" size="3" ng-model="phone1">
        <input type="text" id="number" class="edit number" maxlength="3" size="3" ng-model="phone2" /> -
        <input type="text" id="number" class="edit number" maxlength="4" size="5" ng-model="phone3" />
        </td>
        </tr>
        <tr>
        <td>City</td>
        <td>
        <input class="edit" type="text" ng-model="city">
        </td>
        </tr>
        <tr>
        <td>State</td>
        <td>
        <input class="edit" type="text" ng-model="state">
        </td>
        </tr>
        <tr>
        <td>&nbsp;</td>
        <td>
        <input type="button" value="Save" ng-click="add()">
        </td>
        </tr>
        </table>
        </form>
    </div>



</div>

  
</body>
</html>

＆＃13;

请运行以上SNIPPET

现在，您将代码推送到数组中可以正常使用 AUTO-TAB 。

HERE IS A WORKING DEMO

Answer 2

尝试按值而不是按引用推送变量。我遇到的最快的解决方案是使用JSON对象。重置$ scope.name时可能会出现问题，例如，它会更新数组中的值。

$scope.add = function(id){
    $scope.$apply(function() {
        $scope.people.push({
            name: JSON.parse(JSON.stringify($scope.name)), 
            phone1: JSON.parse(JSON.stringify($scope.phone1)), 
            ...
        });
    });
    //other code
}

JavaScript推送功能进入Angular的重复数组，空白

2 个答案: