Reputation: 84
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> </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>
Upvotes: 2
Views: 140
Reputation: 18647
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> </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.
Upvotes: 1
Reputation: 3867
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
}
Upvotes: 0