AngularJS: how to transfer data from a view to a controller in angularjs

Question

I am developing an application that adds / edits / deletes contacts. Here's what my add-on contact view looks like:

<input placeholder="name" ng-model="contact.name" type="text"> <input placeholder="number" ng-model="contact.number" type="text"> <a href="#/"><button>Add</button></a> 

And here is my controller file, the controller used to add is the last one:

 var myApp = angular.module('myApp', ['ngRoute']).config(function ($routeProvider) { $routeProvider.when('/contact/:index', { templateUrl: 'partials/edit.html', controller: 'Edit' }).when('/', { templateUrl: 'partials/contacts.html' }).when('/add', { templateUrl: 'partials/add.html', controller: 'Add' }) .otherwise({ redirectTo: '/' }); }).controller('Contacts', ['$scope',function($scope){ $scope.contacts = [ {name:'Hazem', number:'01091703638'}, {name:'Taha', number:'01095036355'}, {name:'Adora', number:'01009852281'}, {name:'Esmail', number:'0109846328'} ]; }]).controller('Edit', ['$scope','$routeParams',function($scope,$routeParams){ $scope.contact = $scope.contacts[$routeParams.index]; $scope.index = $routeParams.index; }]).controller('Add', ['$scope', function($scope){ $scope.contacts.push({name: contact.name, number: contact.number}); }]); 

I have an error in the chrome inspector: ReferenceError: username not defined

Answer 1

 controller('Add', function(){ this.contacts.push({name: contactname, number: contactnumber}); }]); 

Each controller has its own scope, in your add controller you are just trying to click on something that is not defined in a variable, which is also undefined $scope.contacts .

Also, when you pass something to the ng model, it basically creates a two-way data binding between a variable with that name in your controller. Thus, in this case, your html will create two variables: $scope.contactname and $scope.contactnumber .

In your view, you also call the Add () function, which was not defined on your controller.

Your controller will look below:

 controller('Add', function(){ var vm = this; vm.contacts = []; //you declare your array of contacts in the controllers scope //vm.contacts = getContactsFromDB(); //typically you'd be getting your initial list from a DB //As good practice, you should initialize the objects in your scope: vm.contactname = ''; vm.contactnumber = ''; vm.Add = function() { vm.contacts.push({name: vm.contactname, number: vm.contactnumber}); //Also you could add the data to a database /* ContactService .AddNewContact(vm.contactname, vm.contactnumber) .then(function(){ vm.contacts.push( {name: vm.contactname, number: vm.contactnumber}); }); */ //Finally you should reset the form variables vm.contactname = ''; vm.contactnumber = ''; } }]); 

Answer 2

See below

use <button ng-click="Add()">Add</button> instaed tag <a>

 var myApp = angular.module('myApp', []) .controller('Add', ['$scope', function($scope){ $scope.contacts = []; $scope.Add = function() { $scope.contacts.push({name: $scope.contactname, number: $scope.contactnumber}); } }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="Add"> <input placeholder="name" ng-model="contactname" type="text"> <input placeholder="number" ng-model="contactnumber" type="text"> <button ng-click="Add()">Add</button> <ul> <li ng-repeat="con in contacts">{{con.name}} {{con.number}}</li> </ul> </div> </div> 

In the add controller, change

 .controller('Add', ['$scope', function($scope){ $scope.contacts.push({name: contactname, number: contactnumber}); }]); .controller('Add', ['$scope', function($scope){ $scope.contacts.push({name: $scope.contactname, number: $scope.contactnumber}); }]);