AngularJS:如何在 angularjs 中将数据从视图传递到控制器 [英] 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="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});
}]);
我在 chrome 检查器中遇到错误说:参考错误:未定义联系人姓名
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});
}]);
每个控制器都有自己的作用域,在您的 Add 控制器中,您只是试图将未定义的内容推送到同样未定义的变量 $scope.contacts
.
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
.
同样在您看来,当您将某些内容传递给 ng-model 时,这基本上是在控制器中具有该名称的变量之间创建双向数据绑定.因此,在这种情况下,您的 html 将创建两个变量:$scope.contactname
和 $scope.contactnumber
.
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
.
在您看来,您还调用了一个尚未在您的控制器上定义的函数 Add().
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屋!