ng-model 不更新 jsp 页面中的值

Question

我正在尝试计算值：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>

我试过调试，但在代码中找不到问题。

Answer 1

改成：

$scope.amountBeforeTax = {value:''};

看法

ng-model="$scope.amountBeforeTax.value"