Angular form save not working with dynamic push data

Question

I am new to angular and stuck with dynamic data binding. I have four data fields 2 static and 2 dynamically adding after add button. When I click add button only two of the fields are shown on the display and remaining data is not populated. I might had make some mistake in data passing. The first two fields are static and second two are dynamic need to add as user clicks. The same happens when using form. Will any one please help me resolve this. Thanks in advance. Below is my code:

Controller:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.items = [];

  $scope.itemsToAdd = [{
    firstName: '',
    lastName: ''
  }];

  $scope.add = function(itemToAdd) {

    var index = $scope.itemsToAdd.indexOf(itemToAdd);

    $scope.itemsToAdd.splice(index, 1);

    $scope.items.push(angular.copy(itemToAdd))
  }

  $scope.addNew = function() {

    $scope.itemsToAdd.push({
      firstName: '',
      lastName: ''
    })
  }
});

View (HTML):

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="plunker" ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>

  <div ng-repeat="item in items">
     {{item.regno}} {{item.section}}
    {{item.firstName}} {{item.lastName}}
  </div>
    <input type="text" ng-model="itemToAdd.regno" />
    <input type="text" ng-model="itemToAdd.section" />
  <div ng-repeat="itemToAdd in itemsToAdd">
    <input type="text" ng-model="itemToAdd.firstName" />
    <input type="text" ng-model="itemToAdd.lastName" />
    <button ng-click="add(itemToAdd)">Add</button>
  </div>
  <div>
    <button ng-click="addNew()">Add new</button>
  </div>
</body>

where is regno and section coming from, in the newly added items? — dev8080, Mar 30 '17 at 10:49
https://plnkr.co/edit/UWgIzNznpsqipKeqfozx?p=preview its working for me — RIYAJ KHAN, Mar 30 '17 at 10:55
@dev8080, regno and section are static fields. firstname and last name are dynamic. Both needs to be submitted on single click. — NoobOwl, Mar 31 '17 at 02:26
@Ritchie, its working for only dynamic fields, what about the static fields. — NoobOwl, Mar 31 '17 at 02:28
@Ritchie, that are not within ng-repeat regno and section, test in your plunker. Top two fields are not sending the data. — NoobOwl, Mar 31 '17 at 05:21

score 1 · Answer 1 · answered Mar 30 '17 at 10:40

1

you can try after add:

$scope.$apply();

answered Mar 30 '17 at 10:40

Dmitry Matrosov

412
4
5

It's bad practice to force angular for manual digest cycle. and if you need at utmost then apply safe check. if(!$scope.$$phase) { //$digest or $apply } [Read More](http://stackoverflow.com/questions/12729122/angularjs-prevent-error-digest-already-in-progress-when-calling-scope-apply) – anoop Mar 30 '17 at 10:45
@Dmitry why you want `$scope.$apply` ? Is it non angular context? – RIYAJ KHAN Mar 31 '17 at 05:50

score 0 · Answer 2 · answered Mar 30 '17 at 10:57

This section:

 <input type="text" ng-model="itemToAdd.regno" />
 <input type="text" ng-model="itemToAdd.section" />

is outside ng-repeat and thus does not know what itemToAdd is; chnage it to this:

<div ng-repeat="itemToAdd in itemsToAdd">
 <input type="text" ng-model="itemToAdd.regno" />
 <input type="text" ng-model="itemToAdd.section" />

 <input type="text" ng-model="itemToAdd.firstName" />
 <input type="text" ng-model="itemToAdd.lastName" />
<button ng-click="add(itemToAdd)">Add</button>

But this only give you empty display since you are not defining regno and section's default values anywhere. Define them in your code:

$scope.itemsToAdd = [{
  firstName: '',
   lastName: '',
  section: 'defaultSection',
  regno: 'defaultRegNo'
}];

and

 $scope.addNew = function() {

$scope.itemsToAdd.push({
  firstName: '',
   lastName: '',
  section: 'defaultSection',
  regno: 'defaultRegNo'
});
};

score 0 · Answer 3 · answered Mar 31 '17 at 05:47

From directives-that-create-scopes angular docs

some directives, such as ng-controller and ng-repeat, create new child scopes and attach the child scope to the corresponding DOM element

In your case,

itemToAdd.regno & itemToAdd.section are different modals and in different scope

compare to itemToAdd.firstName & itemToAdd.lastName.

So,regno & section are not part of inner itemToAdd of ng-repeat.

Thats why,you are not able to get in your $scope.items

You have to add regno & section in add function

$scope.add = function(itemToAdd) {

    itemToAdd.regno = $scope.itemsToAdd.regno;
    itemToAdd.section = $scope.itemsToAdd.section;


    $scope.items.push(angular.copy(itemToAdd))
    console.log($scope.items);
  }

Angular form save not working with dynamic push data

3 Answers3