如何解决ng-model不更新jsp页面中的值
我正在尝试计算值:amountBeforeTax taxAmount和amount,但我的输入名为:amountBeforeTax并没有将控制器中的值更新为$ scope.amountBeforeTax。
版本:
Angular JS:1.2.20 jstl:1.2 Servlet API:2.5 Java版本:1.8.0_261
我想念什么?
我的JS:-
var app = angular.module('helloApp',[]);
app
.controller(
'HttpController',[
'$scope','$rootScope','$filter','$location','$window','$http',function($scope,$rootScope,$filter,$location,$window,$http) {
$scope.apiKey = document.getElementById("apiKey").value;
$scope.amountBeforeTax = '';
$scope.taxAmount = '';
$scope.amount = '';
$scope.showConfirmation = false;
$scope.makePayment = function() {
console.log("make payment start");
$scope.taxAmount = $scope.amountBeforeTax * 0.15;
console.log("amount before tax " + $scope.amountBeforeTax);
$scope.amount = $scope.taxAmount + $scope.amountBeforeTax;
console.log("tax amount " + $scope.taxAmount);
console.log("total amount " + $scope.amount);
$scope.showConfirmation = true;
console.log("make payment end");
}
$scope.proceedPayment = function() {
console.log("proceedPayment payment start");
console.log("proceedPayment payment end");
}
}]);
我已经使用ng-model和双向绑定在页面上实时显示值,但是它没有更新。
我的JSP:-
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- userWhatsAppBuyCredits.jsp -->
<input type="hidden" value="${pageContext.request.contextpath}"
id="contextpath">
<input type="hidden" id="apiKey" value="${apiKeyAttribute}">
<!-- start:main -->
<div class="container">
<div id="main">
<!-- start:breadcrumb -->
<ol class="breadcrumb">
<li><a
href="${pageContext.request.contextpath}/reseller/clientres.jsp">Home</a></li>
<li class="active">Buy Credits</li>
</ol>
<div class="row" id="home-content">
<div class="col-lg-12" style="margin: 25px;">Buy Credits</div>
<div class="col-lg-12" style="margin: 25px;" ng-if="!showConfirmation">
<label for="paymentAmount"></label>
<input name="amountBeforeTax"
id="amountBeforeTax" ng-model="amountBeforeTax"> <br>
<button ng-click="makePayment()">Purchase Credits</button>
</div>
<div class="col-lg-12" style="margin: 25px;">
bT : {{ amountBeforeTax }} tax : {{ taxAmount }} amount {{ amount }}
</div>
<div class="col-lg-12" style="margin: 25px;" ng-if="showConfirmation">
<section class="panel">
<!-- <header class="panel-heading">Credits information </header> -->
<div class="panel-body" id="tablediv">
<div class="adv-table">
<table width="50%">
<tr>
<td
style="color: white; font-weight: 600; background: #2b7eb4;"><b>Amount</b></td>
<td
style="color: white; font-weight: 600; background: #2b7eb4;"><b>R{{ amountBeforeTax}}</b></td>
</tr>
<tr>
<td>VAT @ 15%</td>
<td>R{{ taxAmount }}</td>
</tr>
<tr>
<td
style="color: white; font-weight: 600; background: #2b7eb4;"><b>Total
Amount to be paid in ZAR</b></td>
<td
style="color: white; font-weight: 600; background: #2b7eb4;"><b>R{{ amount }}</b></td>
</tr>
</table>
<hr>
<label>Amount to be paid:R {{ amount}} ZAR</label>
<hr>
<form action="MakePayment">
<button type="submit" class="btn btn-success" ng-click="proceedPayment()">
Proceed<i class="fa fa-arrow-circle-right"></i>
</button>
<!-- </div> -->
</form>
<!-- end:breadcrumb -->
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<script
src="${pageContext.request.contextpath}/assets/js/CustomJs/whatsapp/client/userWhatsAppBuyCredits.js"></script>
我尝试调试,但是在代码中找不到问题。
解决方法
更改为:
$scope.amountBeforeTax = {value:''};
视图
ng-model="$scope.amountBeforeTax.value"
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。