AngularJS重置数组的数组

AngularJS resetting array of arrays

本文关键字：数组 AngularJS      更新时间：2023-09-26

我问了一个类似的问题，并尝试了以前没有运气的解决方案。很简单的问题。我有以下内容:

<script type="text/javascript">
'use strict';
var app = angular.module('app', ['appControllers']);
"use strict";
var appControllers = angular.module('app', []);
appControllers.controller('personController', ['$scope', '$http', function ($scope, $http) {
$scope.responses = [[], [], []];
$scope.addCoach = function() {
$scope.responses[0].push($scope.coach.name);
};
$scope.addAthlete = function() {
$scope.responses[1].push($scope.athlete.name);
};
$scope.addSupportStaff = function() {
$scope.responses[2].push($scope.employee.name);
};

所以基本上我试图将教练，运动员和支持人员的列表添加到数组内的各自数组中，但是当我检查$scope的控制台日志时。回复:只显示最近添加的回复。

编辑:

所以我把我的代码改成如下:

<script type="text/javascript">
'use strict';
var app = angular.module('app', ['appControllers']);
"use strict";
var appControllers = angular.module('app', []);
appControllers.controller('personController', ['$scope', '$http', function ($scope, $http) {
$scope.responses = {
coaches: [],
athletes: [],
employees: []   
};
$scope.addCoach = function() {
$scope.responses.coaches.push($scope.coach.name); 
console.log($scope.responses);
$scope.coach = {}; // Do this to clean up the form fields
};
$scope.addAthlete = function() {
$scope.responses.athletes.push($scope.athlete.name); 
console.log($scope.responses);
$scope.athlete = {}; // Do this to clean up the form fields
};
$scope.addSupportStaff = function() {
$scope.responses.employees.push($scope.employee.name); 
console.log($scope.responses);
$scope.employee = {}; // Do this to clean up the form fields
};

}]);

HTML 

<h1>Coaches Attending</h1>
<div data-ng-app="app" data-ng-controller="personController">
<div>
<div>
<input type="text" class="span3" placeholder="Full Name" ng-model="coach.name">
<button type="button" ng-click="addCoach()">&nbsp;&nbsp;Add&nbsp;&nbsp;</button>   </div>
<div >
    <ul><li ng-repeat="coach in responses.coaches">{{coach}}</li></ul>
</div>
</div>
<br>  
<h1>Athletes Attending</h1>
<div data-ng-app="app" data-ng-controller="personController">
<div>
<div>
<input type="text" class="span3" placeholder="Full Name" ng-model="athlete.name">
<button type="button" ng-click="addAthlete()">&nbsp;&nbsp;Add&nbsp;&nbsp;</button>   </div>
<div >
    <ul><li ng-repeat="athlete in responses.athletes">{{athlete}}</li></ul>
</div>
</div>
<br>  
<h1>Support Staff Attending</h1>
<div data-ng-app="app" data-ng-controller="personController">
<div>
<div>
<input type="text" class="span3" placeholder="Full Name" ng-model="employee.name">
<button type="button" ng-click="addSupportStaff()">&nbsp;&nbsp;Add&nbsp;&nbsp;</button>   </div>
<div >
    <ul><li ng-repeat="employee in responses.employees">{{employee}}</li></ul>
</div>
</div>

但是我现在的问题是，当我在添加任何运动员或支持人员后在教练列中添加某人时，它会删除前面的条目。

修复。我多次定义控制器和应用程序给它多个实例

为什么不使用对象呢?

$scope.responses = {
    coaches: [],
    athletes: [],
    employees: []   
};

然后像这样:

$scope.addCoach = function (contact) {
    $scope.responses.coaches.push(contact.name);
};
var exampleCoach = {name: "Tim Burns", email: "test@tester.com"};
$scope.addCoach(exampleCoach);
console.log($scope.responses);

如果这没有帮助，设置一个柱塞与您的整个相关代码，包括视图。可能是你显示结果的方式有问题。

[Edit:]你的问题是数据被清除，这是因为你正在推动一个引用。所以当你更新原始的时候，引用也被清除了。当你push对象的时候，你需要做一个对象的拷贝。

试试这样写:

$scope.addCoach = function (contact) {
    var clonedContact= angular.copy(contact);
    $scope.responses.coaches.push(clonedContact);
};
相关文章：