AngularJS: come passare i dati dalla vista al controller in angularjs

Question

Sto sviluppando un'applicazione che aggiunge/modifica/rimuove i contatti. Ecco come il mio modello di vista aggiungendo il contatto appare come:

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

Ed ecco il mio file controller, il controller utilizzato per l'aggiunta è l'ultimo:

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}); 
}]); 

Ho un errore nella finestra di ispezione di Chrome dice: ReferenceError: contactname non è definito

Answer 1

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

Ogni controller ha un proprio campo di applicazione, il controller aggiuntivo si sta semplicemente cercando di spingere qualcosa che non è definito in una variabile anch'essa indefinita $scope.contacts.

Anche dal tuo punto di vista, quando passi qualcosa in ng-model, questo in pratica sta creando un collegamento dati bidirezionale tra una variabile con quel nome nel controller. In questo caso, il tuo html creerà due variabili: $scope.contactname e $scope.contactnumber.

Nella vista si chiama anche una funzione Aggiungi() che non è stata definita sul controller.

Qui di seguito è ciò che il controller dovrebbe essere simile:

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

Si prega di vedere sotto

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

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>

Nel vostro controller Add cambiamento

.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}); 
}]);