在AngularJS的控制器中將對象保存到數組中
[英]Saving an object into an array in a controller in AngularJS
問題描述
我一直在創建聯系人列表網站，並且剛剛開始嘗試實現添加聯系人功能。 到目前為止，我已經使用表單和輸入元素創建了頁面，然后使用ng-click調用了一個函數，該函數理論上會將包含這些輸入值的對象添加到控制器中已經存在的數組中。 由於某種原因，這不起作用，並且沒有添加任何內容。
特別是，我在js / app.js文件和$ part。/ edit.html網頁的$ scope.saveContact = function（）方面遇到了麻煩。 嘗試添加聯系人時單擊“確認按鈕”會調用saveContact函數，但結果存儲不正確。 任何幫助表示贊賞。
在我的HTML中，我有以下代碼（該代碼在我的控制器中調用saveContact（）函數。
<a href="#/"><div class="confirm col-xs-6" ng-click="saveContact()">
<h3>Confirm</h3>
</div></a>
在我的app.js文件中，我有一個空對象的聲明和一個包含已具有值的對象的數組（用於顯示已創建的聯系人）。 我正在嘗試使用.push（）添加到這些聯系人，但是由於某種原因，它無法正常工作。
$scope.contact = { ... } //empty object that gets inputs from HTML
$scope.contacts = [ { ... }, ... ];
$scope.saveContact = function(){
$scope.contacts.push($scope.contact);
};
此底部函數無法將聯系人對象推送到聯系人數組，我不明白為什么。
2 個解決方案
解決方案1
2 2015-07-16 06:49:57
這是因為您為所有路由分配了相同的控制器。 您的saveContact函數可以正常工作，它將對象推入數組。 更改路線后，將立即創建控制器的新實例，因此丟失添加的對象。 您應該創建一個服務（單個）來存儲對象，並將該服務作為對控制器的依賴項注入。 這樣，數組將一直保留到頁面加載為止。
app.service("storeContact", function(){
var contacts = [];
this.setContact = function(cnt){
contacts.push(cnt)
};
this.getContact = function(){
return contacts;
}
});
並將其注入控制器中，並使用setContact和getContact方法更新聯系人數組並檢索聯系人數組。
理想情況下，您應該為自己的路線設置單獨的控制器。
解決方案2
1 2015-07-16 07:06:27
問題出在您的app.config代碼中。 您對所有模板都使用相同的控制器。
這不是必需的，因為您已經在與body相連的ng-controller提到了相同的內容
<body ng-controller="AppController">
<div ng-view></div>
<script src="js/app.js"></script>
</body>
對所有路徑使用相同的控制器實質上是在更改路徑時（重新）實例化控制器 ，這就是$scope.contacts.push($scope.contact);的原因$scope.contacts.push($scope.contact); 從/add調用時，對路由/無效。
contactListApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
controller: 'AppController',
controllerAs: 'list',
templateUrl: 'partials/list.html'
})
.when('/add', {
controller: 'AppController',
controllerAs: 'add',
templateUrl: 'partials/edit.html'
})
.when('/edit/:id', {
controller: 'AppController',
controllerAs: 'edit',
templateUrl: 'partials/edit.html'
})
.otherwise({
redirectTo: '/'
});
}]);
解決方法：
將單獨的控制器用於單獨的路由，或者使用服務來存儲對象
要么
只需從路由配置中刪除控制器和控制器即可，一切順利。
更新的配置：
contactListApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/list.html'
})
.when('/add', {
templateUrl: 'partials/edit.html'
})
.when('/edit/:id', {
templateUrl: 'partials/edit.html'
})
.otherwise({
redirectTo: '/'
});
}]);
如何在angularjs控制器中將JSON數組更新為列表對象
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.