Question

我问了一个与此类似的问题并尝试了之前没有运气的解决方案。非常简单的问题。我有以下内容：

<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.responses的控制台日志时，它只显示最近添加的一个

编辑：

所以我已将代码更改为以下内容：

<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>

但我现在的问题是，当我在加入任何运动员或支持人员之后在教练专栏中添加某人时，它会删除以前的参赛作品。

Answer 1

为什么不使用对象？

$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);

如果这样做无效，请使用您的整个相关代码（包括视图）设置plunker。如何显示结果可能有问题。

[编辑：] 关于数据清除的问题，这是因为您正在推送引用。因此，当您更新原始内容时，也会清除引用。你需要在推动它时复制该对象。

尝试这样的事情：

$scope.addCoach = function (contact) {
    var clonedContact= angular.copy(contact);
    $scope.responses.coaches.push(clonedContact);
};

Answer 2

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

AngularJS重置数组数组

2 个答案: