[英]AngularJS: How to pass data from view to controller in angularjs
我正在開發一個添加/編輯/刪除聯系人的應用程序。 以下是我添加聯系人視圖模板的方式:
<input placeholder="name" ng-model="contact.name" type="text">
<input placeholder="number" ng-model="contact.number" type="text">
<a href="#/"><button>Add</button></a>
這是我的控制器文件,用於添加的控制器是最后一個:
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檢查器中遇到錯誤:ReferenceError:未定義contactname
請看下面
使用<button ng-click="Add()">Add</button>
<a>
標簽的instaed
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>
.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}); }]);
controller('Add', function(){
this.contacts.push({name: contactname, number: contactnumber});
}]);
每個控制器都有自己的范圍,在Add控制器中,您只是嘗試將未定義的內容$scope.contacts
也未定義$scope.contacts
的變量中。
另外在您的視圖中,當您將某些內容傳遞給ng-model時,這基本上是在控制器中具有該名稱的變量之間創建雙向數據綁定。 所以在這種情況下,你的html將創建兩個變量: $scope.contactname
和$scope.contactnumber
。
在您的視圖中,您還調用了一個函數Add(),該函數尚未在您的控制器上定義。
以下是您的控制器應該是什么樣子:
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 = '';
}
}]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.