我一直在研究 Angular 和形式，但我在使用下面的代码时遇到了一些问题。我认为每当提交表单时，它应该将名字添加到 ng-repeat 已经显示的名字中，但提交按钮似乎什么也不做。
HTML:
<!DOCTYPE html>
<html lang="en" ng-app="file">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script types="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script types=text/javascript" src="formLoops.js"></script>
<title>Title</title>
</head>
<body ng-controller="PersonalDetailsController as person">
<p ng-repeat="info in person.details">{{info.forename}}</p>
<form name="PersonalDetailsForm" ng-controller="DataEntryController as dataCtrl" ng-submit="addPerson(person)">
<blockquote>
<p>{{dataCtrl.person.forename}}</p>
<p>{{dataCtrl.person.surname}}</p>
</blockquote>
<label>Forename:</label>
<input ng-model="dataCtrl.person.forename"/>
<label>Surname:</label>
<input ng-model="dataCtrl.person.surname"/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
JS:
var app = angular.module("file", []);
app.controller("PersonalDetailsController", function() {
this.details = personalDetails;
});
app.controller("DataEntryController", function() {
this.person = {};
this.addPerson = function(person) {
person.personalDetails.push(this.person);
};
});
var personalDetails = [{
forename: "John",
surname: "Doe"
},
{
forename: "John",
surname: "Smith"
}
];
最佳答案
您需要对代码进行两处更改
1) 在 HTML 中，您需要添加 ng-submit="dataCtrl.addPerson(person)"
因为您正在使用 Controller 作为语法
2)您需要将js代码如下 person.personalDetails.push(this.person); 更改为 person.details.push(this.person);
这是因为您的重复正在使用详细信息数组，因此您需要将新数据推送到详细信息数组本身。您正在尝试将数据推送到全局数组内，这就是它不起作用的原因
谢谢
关于javascript - 使用 angular.js 进行表单控制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44430437/