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

Question

Let me start by saying this is not a repeated question, I read every related question! My edit functions work fine, and my push function to update the array was working, and I'm certain I never touched it, it just stopped working!

I'm going to say my HTML form has ng-model's that have no spelling errors, that are used to help with the push. The Angular code:

                $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//
    }

My edit functions work, my delete ones do, it's just this one, when I hit the button that sets off the add() function, it resets the form input, but pushes a blank array into my ng-repeat list!

I have a form that has multiple inputs with ng-model set to whatever; name, phone1 ... etc, and the angular code is correct, so why the hell will this not work?

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

MAJOR UPDATE!

I use a JQuery autotab function, and as soon as I commented it out, the arrays passed in normally again.
The function is used on the form provided above, and auto tabs to the next input.

Here's the function:

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

I commented out the reset code, didn't change the ineffectivity — Adrian Higgins
– Adrian Higgins, Commented Jan 24, 2017 at 4:48
In jquery auto-tab there is an angular version refer to this file, raw.githubusercontent.com/Mathachew/jquery-autotab/master/… — Sravan
– Sravan, Commented Jan 24, 2017 at 5:53

Sravan · Accepted Answer · 2017-01-24 06:28:50Z

Using Jquery and angular doestnot fit every time

So, we should use the angular version of the Auto tabs.

So, Here is the solved example using Auto tabs with Angular.

The important line to be added is

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

Please run the Above SNIPPET

Now, your pushing the code into the Array works fine with AUTO-TAB.

HERE IS A WORKING DEMO

Ali Baig · Accepted Answer · 2017-01-24 05:15:51Z

0

Try to push the variables by value and not by reference. The quickest solution that I came through is using the JSON object. This might be a problem when you reset the $scope.name for example, it updates the value in your array.

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

edited Jan 24, 2017 at 5:15

answered Jan 24, 2017 at 4:56

Ali Baig

3,8674 gold badges36 silver badges49 bronze badges

4 Comments

Ali Baig Over a year ago

I don't think so! You can try other functions too that assigns the value and not the reference in javascript

Adrian Higgins Over a year ago

Yea this still isn't working for me...infact weirdly it made a totally different function stop working (A function that shares the save button that closes the form)

Ali Baig Over a year ago

OK strange. Can you share a fiddle link with just relevant information?

Adrian Higgins Over a year ago

Please look at the most recent update in the question, I found the problem, don;t know what causes the conflict

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related