How to add customers to a table from a pop up window using AngularJs?

Question

I'm working on simple customers table information like below: name, lastname and age.

I created a function that allows users to add a new customer and that works fine.

I also created a pop up window and I want to add the new customer from pop up window. My pop up window works fine. But, I unable to add a new customer from this pop up.

Here's the codepen:

http://codepen.io/HenryGranados/pen/OyPyNW

Here's my code that runs just fine

var App = angular.module('sortApp', ['ui.bootstrap'])

App.controller('mainController', function($scope, $modal, $log, $filter) {
$scope.sortType     = 'id'; // set the default sort type
$scope.sortReverse  = false;  // set the default sort order
$scope.searchPerson  = '';     // set the default search/filter term

// Array - List of People   
$scope.People = [
{ id: 1, name: 'Mike', Lastname: 'White', age: 26 },
{ id: 2, name: 'Carl', Lastname: 'Barns', age: 41 },
{ id: 3, name: 'Deb', Lastname: 'McDonals',age: 78 },
{ id: 4, name: 'Tommy', Lastname: 'Humbs', age: 32 }
];  

/*
This function adds a new customer
*/
$scope.addPerson = function(){
var customer = {
 name: $scope.name,
 Lastname: $scope.Lastname,
 age: $scope.age,
};

 $scope.People.push(customer);
};
/*
This function removes a customer
*/
$scope.removePerson = function(index){
$scope.People.splice(index, 1);
};  
$scope.openPopupScreen = function() {

var modalInstance = $modal.open({
template: '<div class="modal-header">   <a class="close" data- dismiss="modal"      ng-click="cancel()">X</a><h1>Add Customer</h1></div><div class="modal-body">    <form >' +
'  <label>Name:</label><input type="text" class="span3" ng-model="name"></br>' +
' <label>Lastname:</label><input type="text" class="span3" ng-model="Lastname"></br>' +
' <label>Age:</label><input type="number" class="span3" ng-model="age"></br>' +
' <button type="submit" class="btn btn-success" ng-click="addPerson()">Add In List</button>' +
'  <button type="reset" class="btn ">Clear</button>' +
' </form>' +
'</div>' +
'<div class="modal-footer">' +
'  <a data-dismiss="modal" aria-hidden="true" class="btn btn-primary" ng-click="cancel()">close</a>' +
'</div>',
 controller: ModalInstanceCtrl
});

};

var ModalInstanceCtrl = function($scope, $modalInstance) {
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};

$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};

});
</script>

Please help me. Thank you so much!!.

Good luck! Popups sending data back to their parent raises a lot of security concerns, and I have struggled with this issue multiple times with no good solution for me. That being said, you could try the `window.opener` technique: https://developer.mozilla.org/en-US/docs/Web/API/Window/opener — perennial_, Sep 03 '15 at 16:23
Would you be interested in doing this using a modal window? If yes I can teach you that. — Behrooz, Sep 03 '15 at 16:30
@Henry Is your app backed by a database? I've never created ID's myself. In any app I've worked in, the database handles populating the ID when the record is inserted. — CDelaney, Sep 03 '15 at 18:39
@CDelaney. No My app doesn't have a backend Database. I appreciate all your help bro. Thank you!! — HenryDev, Sep 03 '15 at 20:13

score 1 · Accepted Answer · answered Sep 03 '15 at 16:42

1

Put your add function into the modal controller, then give it an object to bind to and return to a function that'll add it to your list.

modalInstance.result.then(function (newPerson) {
  $scope.People.push(newPerson);
});

var ModalInstanceCtrl = function($scope, $modalInstance) {
  $scope.person = {name: '', Lastname: '', age: ''};
  ....
  $scope.add = function() {
    //Pass newPerson to caller from main controller
    $modalInstance.close($scope.person);
  };
};

Updated codepen

answered Sep 03 '15 at 16:42

CDelaney

1,238
4
19
36

CDDelaney Thank you so much bro!! – HenryDev Sep 03 '15 at 16:51
One quick question?? this question is related to the ID's . How would you assign ids to the new customers. For example I want the 8th customer to have id 8 , the 9th customer have id 9 and so on, do you use a foor loop?? Thank you so much – HenryDev Sep 03 '15 at 16:53

score 0 · Answer 2 · edited May 23 '17 at 11:58

I'd suggest you make an own controller to add the costumer (in the overlay-popup). Then you send the data to a service which handles costumers (like CostumerService). The data in the list will use the same service and update the data reactively.

It's good practice in angular you put the "view-logic" into the controller and the "data-logic" into a service. Also make an CostumerEditCtrl, CostumerAddCtrl, CostumerListCtrl etc. It's just more flexible. And as long these controllers use the same service, they also use the same data.

Read: Share data between AngularJS controllers

How to add customers to a table from a pop up window using AngularJs?

2 Answers2