我需要在JSON中保存填写的表单值，然后在单击按钮时显示相同的值。
我已保存已填写的初始条目，但无法提取通过ng-repeat保存的值。
这是代码。
<html ng-app="formList">
<head>
<meta charset="UTF-8">
<title>Day 7 Angular Workaround</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/screen.css">
<script src="js/angular.js" type="text/javascript"></script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<form id="form" method="post" action="post.php">
<div class="form-group">
<div class="col-sm-3"><label for="fname">First name</label></div>
<div class="col-sm-9"><input type="text" class="form-control" id="fname" placeholder="First Name"></div>
</div>
<div class="form-group">
<div class="col-sm-3"><label for="lname">Surname</label></div>
<div class="col-sm-9"><input type="text" class="form-control" id="lname" placeholder="Surname"></div>
</div>
<div class="form-group">
<div class="col-sm-3"><label>Gender</label></div>
<div class="col-sm-9">
<div class="radio">
<label>
<input type="radio" name="gender" id="male" value="male" checked>
Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" id="female" value="female">
Female
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3"> <label>Marital Status</label></div>
<div class="col-sm-9">
<div class="radio">
<label>
<input type="radio" name="marital" id="married" value="married" checked onchange="spouseField()">
Married
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="marital" id="unmarried" value="unmarried" onchange="spouseField()">
UnMarried
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3"><label for="spouse-name">Name of Spouse</label></div>
<div class="col-sm-9"><input type="text" class="form-control" id="spouse-name" name="spouse-name" placeholder="Spouse name"></div>
</div>
<div class="form-group">
<div class="col-sm-3"><label for="other">Other Details</label></div>
<div class="col-sm-9"><input type="text" class="form-control" id="other" name="other" placeholder="Enter Other Details..."></div>
</div>
<div class="col-sm-offset-3 col-sm-9">
<button type="reset" class="btn btn-default" id="reset">Reset</button>
<button type="submit" class="btn btn-default" id="submit" ng-click="showResults=true">Save & Show</button>
<!-- <button type="submit" class="btn btn-default" id="show" ng-click="showValues();">Hide</button> -->
</div>
</form>
<div id="showResults" ng-show="showResults" >
<table class="table-responsive table-bordered table-striped">
<tr>
<th>Firstname</th>
<th>LastName</th>
<th>Other Details</th>
<th>Gender</th>
</tr>
<tr ng-repeat="item in formElements">
<td>{{item.firstName}}</td>
<td>{{item.lastName}}</td>
<td>{{item.other}}</td>
<td>{{item.gender}}</td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript">
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var button = document.getElementById("submit");
var spouseName = document.getElementById('spouse-name');
var other = document.getElementById('other');
var marital = document.getElementsByName('marital');
var gender = document.getElementsByName('gender');
var formValues = {};
button.addEventListener('click', function(e){
e.preventDefault();
validateForm();
return false;
});
//set focus
fname.focus();
//set spouse text field behaviour
function spouseField(){
// var marital = document.getElementsByName('marital');
var marital_value;
for(var i = 0; i < marital.length; i++){
if(marital[i].checked){
marital_value = marital[i].value;
}
}
if(marital_value ==="married"){
spouseName.disabled = false;
}
else {
spouseName.disabled = true;
}
}
//empty fields check
function validateForm(){
var inputs = document.forms[0].getElementsByTagName("input");
for (var i = 0; i<inputs.length; i++){
if (!inputs[i].value && inputs[i].disabled === false ){
alert( inputs[i].placeholder + " can not be empty.");
inputs[i].focus();
return false;
}
}
// check for empty spaces on name and spouse name
if( fname.value.trim().length == 0 || lname.value.trim().length == 0 || (spouseName.value.trim().length == 0 && spouseName.disabled === false) ){
alert("Empty spaces in name fields not allowed");
return false;
}
saveValues();
// showValues();
// alert("Thank you !");
}
function saveValues(){
formValues.firstName = fname.value;
formValues.lastName = lname.value;
formValues.other = other.value;
formValues.gender = (function genderValue(){
for (var i = 0, length = gender.length; i < length; i++) {
if (gender[i].checked) {
return gender[i].value;
}
}
})();
return formValues;
}
</script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
APP.JS
var app = angular.module("formList", []);
app.controller("myCtrl", function($scope){
$scope.formElements = formValues;
});
答案 0 :(得分：0)
Angular对编写的代码并不是非常宽容，不能以“有角度”的方式编写。这里的具体问题可能是没有任何东西触发Angular摘要周期，这通常会在使用ng-model，ng-click等时自动发生。
修复此代码的最简单方法是向控制器添加一个函数来调用validateForm并使用ng-click提交按钮来调用它。但是请注意，如果你不回到正方形并将整个事物写成适当的Angular应用程序，那么你正在为自己的痛苦做好准备。
答案 1 :(得分：0)
我同意@ChrisRibe。摘要周期是这段代码中的问题，但您只需将代码完全转换为Angular就可以了。将Angular与非Angular混合起来并不是一个好主意。
如果您将此作为学习练习，最好学会正确行事。
对于此代码，我建议创建一个像=AVERAGEIF这样的对象或类似的东西。然后使用ng-model将所有表单值绑定到$scope.person。然后，您可以从JS代码中删除除person.whatever之外的几乎所有内容。
点击按钮即可致电validateValues。
阅读一些教程，并按照“Angular”的方式减少痛苦。