我尝试自动添加两列数据，但模型 individualDeatail.add 值中的数据不会自动更新。我究竟做错了什么？？我可以在输入框中获取添加的数据，但在 individualDetail.add 中未更新相同的数据？请帮忙
index.html
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <script src="script/angular.min.js"></script> <script src="script/script.js"></script> <script src="script/scripts.js"></script> <title>Dynamically Add-Remove Rows from Table</title>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body ng-app="myapp" ng-controller="ListController">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="addNew()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>Number1</th>
<th>number2</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>
<input type="checkbox" ng-model="personalDetail.selected"/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.num1" required/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.num2" required/></td>
<td>
<input type="text" class="form-control" value="{{parseFloat(personalDetail.num1)+parseFloat( personalDetail.num2)}}"
></td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!personalDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
</div>
</form>
{{personalDetails}}
</div>
</div>
</div>
</div>
</div> </body> </html>
script.js
var app = angular.module("myapp", []); app.controller("ListController", ['$scope', function($scope) {
$scope.personalDetails = [
{
'num1':'',
'num2':'',
'add':''
}];
$scope.addNew = function(personalDetail){
$scope.personalDetails.push({
'num1': "",
'num2': "",
'add': ""
});
};
$scope.parseFloat = function(value)
{
return parseFloat(value);
}
$scope.remove = function(){
var newDataList=[];
$scope.selectedAll = false;
angular.forEach($scope.personalDetails, function(selected){
if(!selected.selected){
newDataList.push(selected);
}
});
$scope.personalDetails = newDataList;
};
$scope.checkAll = function () {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.personalDetails, function(personalDetail) {
personalDetail.selected = $scope.selectedAll;
});
};
}]);
最佳答案
发生这种情况是因为您没有为第三个输入框设置 ng-model， 您可以编写一个函数来计算总和并将值分配给 $scope 变量。
演示
var app = angular.module("myapp", [])
app.controller("ListController", ['$scope', function($scope) {
$scope.personalDetails = [{
'num1': '',
'num2': '',
'add': ''
}];
$scope.calculateSum = function(val) {
val.add = parseFloat(val.num1) + parseFloat(val.num2);
}
$scope.addNew = function(personalDetail) {
$scope.personalDetails.push({
'num1': "",
'num2': "",
'add': ""
});
};
$scope.parseFloat = function(value) {
return parseFloat(value);
}
}]);<html>
<head>
<meta charset="UTF-8">
<script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
<title>Dynamically Add-Remove Rows from Table</title>
<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
</head>
<body ng-app="myapp" ng-controller="ListController">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="addNew()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</th>
<th>Number1</th>
<th>number2</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>
<input type="checkbox" ng-model="personalDetail.selected" />
</td>
<td>
<input type="text" ng-keyup="calculateSum(personalDetail)" class="form-control" ng-model="personalDetail.num1" required/>
</td>
<td>
<input type="text" ng-keyup="calculateSum(personalDetail)" class="form-control" ng-model="personalDetail.num2" required/>
</td>
<td>
<input type="text" ng-model="personalDetail.add" class="form-control" >
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!personalDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
</div>
</form>
{{personalDetails}}
</div>
</div>
</div>
</div>
</div>
</body>
</html>关于javascript - 模型personalDeatail.add 值中的数据不会自动更新。我究竟做错了什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41406839/