AngularJS: Cách chuyển dữ liệu từ chế độ xem sang bộ điều khiển trong angularjs

Question

Tôi đang phát triển một ứng dụng bổ sung/chỉnh sửa/xóa địa chỉ liên hệ. Sau đây là cách thêm tôi xem tiếp xúc mẫu trông giống như:

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

Và đây là tập tin điều khiển của tôi, bộ điều khiển sử dụng để thêm là mới nhất:

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

Tôi đã có lỗi trong trình kiểm tra chrome cho biết: Tham chiếuLỗi: tên liên hệ không được xác định

Answer 1

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

Mỗi bộ điều khiển có phạm vi riêng của mình, trong điều khiển Add của bạn, bạn chỉ đơn giản là đang cố gắng đẩy thứ gì đó không được xác định vào một biến cũng không được xác định $scope.contacts.

Cũng theo quan điểm của bạn, khi bạn chuyển thứ gì đó vào mô hình ng, điều này về cơ bản là tạo một liên kết dữ liệu hai chiều giữa một biến với tên đó trong bộ điều khiển của bạn. Vì vậy, trong trường hợp này, html của bạn sẽ tạo hai biến: $scope.contactname và $scope.contactnumber.

Trên chế độ xem của bạn, bạn cũng đang gọi hàm Add() chưa được xác định trên bộ điều khiển của bạn.

Dưới đây là những gì điều khiển của bạn sẽ giống như thế:

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

Vui lòng xem bên dưới

sử dụng <button ng-click="Add()">Add</button> instaed của <a> thẻ

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>

Trong điều khiển Add bạn thay đổi

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