AngularJS：如何在angularjs中將數據從視圖傳遞到控制器

Question

我正在開發一個添加/編輯/刪除聯繫人的應用程序。 這是我添加聯繫人視圖模板的樣子：

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

我有在鉻檢查器錯誤說： ReferenceError：聯繫人名稱未定義

Answer 1

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

每個控制器都有自己的適用範圍，在添加控制器，你只是想將未定義的東西推入一個也未定義的變量$scope.contacts。

同樣在你的看法中，當你將某些東西傳遞給ng模型時，這基本上是在控制器中的一個名稱變量之間創建一個雙向數據綁定。所以在這種情況下，你的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 = ''; 
    } 


}]); 

Answer 2

請參閱下面

使用<button ng-click="Add()">Add</button> instaed <a>標籤

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