view raw
Hazem Taha Hazem Taha - 9 months ago 140
AngularJS Question

AngularJS: How to pass data from view to controller in angularjs

I'm developing an application which adds/edits/removes contacts.
Here is how my adding contact view template looks like:

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

And here is my controllers file, the controller used for adding 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.contacts[$routeParams.index];
$scope.index = $routeParams.index;
}]).controller('Add', ['$scope', function($scope){
$scope.contacts.push({name:, number: contact.number});

I've got an error in the chrome inspector says:
ReferenceError: contactname is not defined

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

Each controller has its own scope, in your Add controller you are simply trying to push something that isn't defined into a variable that's also undefined $scope.contacts.

Also on your view, when you pass something into ng-model, this is basically creating a two-way data binding between a variable with that name in your controller. So in this case, your html will create two variables: $scope.contactname and $scope.contactnumber.

On your view you are also calling a function Add() which hasn't been defined on your controller.

Below is what your controller should look like:

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
       .AddNewContact(vm.contactname, vm.contactnumber)
                  {name: vm.contactname, number: vm.contactnumber});

     //Finally you should reset the form variables
     vm.contactname = '';
     vm.contactnumber = '';