JavaScript 将函数推入 Angular 的 ng-repeat 数组空白

Question

首先声明这不是一个重复的问题，我阅读了每个相关问题！我的编辑功能工作正常，我更新数组的推送功能工作正常，我确定我从来没有碰过它，它只是停止工作了！

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

                $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名单！

我有一个具有多个输入的表单，其中 ng-model 设置为任意值； name, phone1 ... 等等，而且 angular 代码是正确的，那么为什么这行不通呢？

<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>

重大更新！

我用了一个JQueryautotab函数，一注释掉，数组又正常传入了
该功能用于上面提供的表单，并自动跳转到下一个输入。

函数如下：

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

Answer 1

尝试按值而不是按引用推送变量。我遇到的最快的解决方案是使用 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
}

Answer 2

使用Jquery和angular并不是每次都合适

所以，我们应该使用 angular 版本的自动标签。

因此，这是使用 Auto tabs 和 Angular 的解决示例。

要添加的重要行是

$.autotab.selectFilterByClass = true;

    $.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//
        }
    });

<!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>

请运行以上片段

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

HERE IS A WORKING DEMO

JavaScript 将函数推入 Angular 的 ng-repeat 数组空白

JavaScript Push function into Angular's ng-repeat array coming in blank

javascript

angularjs

ng-repeat