我有一个按钮列表，每个按钮都有一些数据。这些数据代表医生办公室自付额的标准自付费用10美元，共付20美元等等。我试图像收银机一样使用此应用程序，以便当用户点击自付费按钮（从左侧）或按钮与未结余额与美元金额相关联，它会将其添加到我表格右侧的总计列表中。用户可以继续点击自付额和未结余额，以在右侧的表格中添加行（将一起添加）。我已经能够将空白表行添加到我的总计表中，但我不确定如何从按钮到表格中获取值。提前致谢。
angular
.module('myApp')
.controller('BillingCtrl', function($scope){
$scope.payments= [
{id:'1', paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:10.00},
{id:'2',paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:20.00},
{id:'3',paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:35.00},
{id:'4',paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:75.00}
];
$scope.outstanding=[
{busunit:'Ohio Physicians', date:'Fri, 18 Dec 2009 20:28:37 GMT', amount:100.00},
{busunit:'Ohio Physicians', date:'Wed, 06 Apr 2012 20:28:37 GMT', amount:100.00},
];
$scope.totals=[''];
$scope.addPayments= function (i) {
if($scope.totals.indexOf(i)<=1){
$scope.totals.push(i);
}
};
});<div ng-controller="BillingCtrl">
<div class="container-fluid">
<hr>
<div class="row">
<div class="col-md-5">
<h4>Today's Payment</h4>
<form role="form" ng-submit="addPayment()">
<div class="list-group">
<button type="submit" value="Submit"class="list-group-item">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading" ng-model="paytype">Copay</p>
</div>
<div class="col-sm-4">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="InputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="InputAmount" placeholder="Amount" ng-model="amount">
</div>
</div>
</form>
</div>
</div>
</button>
<button type="button" class="list-group-item" ng-repeat="payment in payments" ng-click="addPayments(selectedItem)" ng-model="selectedItem">
<div class="row vertical-align">
<div class="col-sm-4">
<p class="list-group-item-heading">{{payment.paytype}}</p>
</div>
<div class="col-sm-8">
<p class="pull-right">${{payment.amount}}</p>
</div>
</div>
</button>
<button type="button" class="list-group-item">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading">Other</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</div>
</div>
</button>
</div>
</form>
<br>
<h4>Outstanding Balances</h4>
<div class="list-group">
<button type="button" class="list-group-item" ng-repeat="balance in outstanding">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading">{{balance.busunit}}</p>
<p class="list-group-item-text">{{balance.date}}</p>
</div>
<div class="col-sm-4">
<p class="pull-right">${{balance.amount}}</p>
</div>
</div>
</button>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<div class="row vertical-align">
<div class="col-sm-6">
<p><span class="fa fa-user"> <strong>Sally Perkins</strong></span> <span>12345678</span></p>
</div>
<div class="col-sm-6">
<p class="pull-right">Dec 17, 2015</p>
</div>
</div>
<table class="table table-default">
<tr ng-repeat="total in totals track by $index">
<td>{{total.paytype}}</td>
<td>{{total.billing}}</td>
<td>{{total.busunit}}</td>
<td>{{total.amount}}</td>
</tr>
<hr>
<button class="btn btn-primary btn-block">Charge $0.00</button>
</div><!--closeright-hand column-->
</div>
</div>
</div>
答案 0 :(得分：1)
我不会使用ng-submit。我会在按钮上使用ng-click，这样您就可以传递可以在addPayment方法中使用的ng-repeat的当前对象。
此外，currency过滤器对于显示金额值非常有用。过滤器的使用方式与{{ number | currency }}类似。您可以阅读更多相关信息here。
您的标记很好，但在开发应用期间很难阅读。我建议尽可能简化标记并稍后改进样式。
请查看下面或此jsfiddle中的更新代码。
angular
.module('myApp', [])
.controller('BillingCtrl', function($scope) {
$scope.payments = [{
id: '1',
paytype: 'Copay',
billing: 'Epic',
busunit: 'Ohio Physicians',
amount: 10.00
}, {
id: '2',
paytype: 'Copay',
billing: 'Epic',
busunit: 'Ohio Physicians',
amount: 20.00
}, {
id: '3',
paytype: 'Copay',
billing: 'Epic',
busunit: 'Ohio Physicians',
amount: 35.00
}, {
id: '4',
paytype: 'Copay',
billing: 'Epic',
busunit: 'Ohio Physicians',
amount: 75.00
}
];
$scope.outstanding = [{
busunit: 'Ohio Physicians',
date: 'Fri, 18 Dec 2009 20:28:37 GMT',
amount: 100.00
}, {
busunit: 'Ohio Physicians',
date: 'Wed, 06 Apr 2012 20:28:37 GMT',
amount: 100.00
},
];
$scope.totals = [];
$scope.total = 0;
var calcTotal = function() {
var sum = 0;
angular.forEach($scope.totals, function(total) {
sum += total.amount;
});
return sum;
}
$scope.addPayments = function(payment) {
//if ($scope.totals.indexOf(i) <= 1) {
$scope.totals.push(payment);
$scope.total = calcTotal();
//console.log(payment, $scope.total);
//}
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="BillingCtrl" ng-app="myApp">
<div class="container-fluid">
<hr>
<div class="row">
<div class="col-md-5">
<h4>Today's Payment</h4>
<form role="form">
<div class="list-group">
<button type="submit" value="Submit" class="list-group-item">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading" ng-model="paytype">Copay</p>
</div>
<div class="col-sm-4">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="InputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="InputAmount" placeholder="Amount" ng-model="amount">
</div>
</div>
</form>
</div>
</div>
</button>
<button type="button" class="list-group-item" ng-repeat="payment in payments" ng-click="addPayments(payment)">
<!-- ng-model="selectedItem"> -->
<div class="row vertical-align">
<div class="col-sm-4">
<p class="list-group-item-heading">{{payment.paytype}}</p>
</div>
<div class="col-sm-8">
<p class="pull-right">${{payment.amount}}</p>
</div>
</div>
</button>
<button type="button" class="list-group-item">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading">Other</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</div>
</div>
</button>
</div>
</form>
<br>
<h4>Outstanding Balances</h4>
<div class="list-group">
<button type="button" class="list-group-item" ng-repeat="balance in outstanding" ng-click="addPayments(balance)">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading">{{balance.busunit}}</p>
<p class="list-group-item-text">{{balance.date}}</p>
</div>
<div class="col-sm-4">
<p class="pull-right">${{balance.amount}}</p>
</div>
</div>
</button>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<div class="row vertical-align">
<div class="col-sm-6">
<p><span class="fa fa-user"> <strong>Sally Perkins</strong></span> <span>12345678</span></p>
</div>
<div class="col-sm-6">
<p class="pull-right">Dec 17, 2015</p>
</div>
</div>
<p>
{{total | currency }}
</p>
<table class="table table-default">
<tr ng-repeat="total in totals track by $index">
<td>{{total.paytype}}</td>
<td>{{total.billing}}</td>
<td>{{total.busunit}}</td>
<td>{{total.amount | currency }}</td>
</tr>
<hr>
<button class="btn btn-primary btn-block">Charge $0.00</button>
</div>
<!--closeright-hand column-->
</div>
</div>
</div>