AngularJS：如何在angularjs中将数据从视图传递到控制器 [英] AngularJS: How to pass data from view to controller in angularjs

问题描述

我正在开发一个可添加/编辑/删除联系人的应用程序。
下面是我添加联系人视图模板的样子：

 < input placeholder =nameng-model =contact.nametype =text> 
< input placeholder =numberng-model =contact.numbertype =text> 
< a href =＃/>< button>添加< / button>< / a> 
  

这里是我的控制器文件，用于添加的控制器最后一个：

  var myApp = angular.module ['ngRoute']）。config（function（$ routeProvider）{
 $ routeProvider.when（'/ contact /：index'，{
 templateUrl：'partials / edit.html'，
（'/'，{
 templateUrl：'partials / contacts.html'
}）when（'/ add'，{
 templateUrl：'partials / add.html'，
 controller：'Add'
}）
 .otherwise（{redirectTo：'/'}）; 
}）。控制器（'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 = .contacts [$ routeParams.index]; 
 $ scope.index = $ routeParams.index; 
}]）。controller（'Add'，['$ scope'，function（$ scope）{
 $ scope.contacts.push（{name：contact.name，number：contact.number} ）; 
}]）; 
  

我的chrome检查器有一个错误说：
ReferenceError：contactname is not定义

解决方案

  controller（'Add'，function（）{
 this .contacts.push（{name：contactname，number：contactnumber}）; 
}]）; 
 

每个控制器都有自己的范围，在你的添加控制器，你只是试图推动的东西， t定义为一个也未定义的变量 $ scope.contacts 。

到ng-model，这基本上是创建一个双向数据绑定在一个变量与该名称之间的控制器。所以在这种情况下，你的html将创建两个变量： $ scope.contactname 和 $ scope.contactnumber p>

在你的视图中，你也调用了一个没有在控制器上定义的函数Add（）。

下面是你的控制器应该是什么样子：

  controller（'Add'，function（）{
 var vm = this; 
 vm.contacts = []; //在控制器范围内声明联系人数组
 //vm.contacts = getContactsFromDB（）; //通常你会得到你的初始列表从DB 
 
 //作为良好的做法，您应该初始化范围中的对象：
 vm.contactname =''; 
 vm.contactnumber =''; 
 
 vm.Add = function（）{
 vm.contacts.push（{name：vm.contactname，number：vm.contactnumber}）; 
 //也可以添加数据到数据库
 / * 
 ContactService 
 .AddNewContact（vm.contactname，vm.contactnumber）
 .then（function（）{
 vm.contacts.push （
 {name：vm.contactname，number：vm.contactnumber}）; 
}）; 
 * / 
 
 //最后你应该重置形式变量
 vm.contactname =''; 
 vm.contactnumber =''; 
} 
 
 
}]）; 
  

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="contact.name" 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.contact = $scope.contacts[$routeParams.index];
    $scope.index = $routeParams.index;
}]).controller('Add', ['$scope', function($scope){
    $scope.contacts.push({name: contact.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
     /*
       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 = '';
   }  


}]);

这篇关于AngularJS：如何在angularjs中将数据从视图传递到控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！