Question

我正在尝试建立一个使用ASP.NET Core MVC和AngularJs付款的预订系统。我无法动态更改客户表单字段值，以便稍后将其用作变量。即使视图值动态变化，值（价格）也不会在输出值中发生变化。

我的脚本如下：

@section Scripts {
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.tourid = @ViewBag.TourID;

            $scope.count = 1;
            $scope.roomcost = 0;
            $scope.total = $scope.count * $scope.roomcost + $scope.count * @Decimal.Multiply((decimal)ViewBag.Kur, Model.Tour.TourCost);
            $scope.butondeposit = "btn-default";
            $scope.butonnormal = "btn-success";
            $scope.price = $scope.count * @Model.Tour.TourCost + $scope.count * $scope.roomcost;


            $scope.two = "btn-default";
            $scope.three = "btn-default";
            $scope.four = "btn-success";

            $scope.twoclick = function () {
                $scope.two = "btn-success";
                $scope.three = "btn-default";
                $scope.four = "btn-default";

                $scope.roomcost = 80;
                $scope.price = $scope.count * @Model.Tour.TourCost + $scope.count * $scope.roomcost;
                $scope.total = $scope.count * $scope.roomcost + $scope.count * @Decimal.Multiply((decimal)ViewBag.Kur, Model.Tour.TourCost);
            }

            $scope.threeclick = function () {
                $scope.two = "btn-default";
                $scope.three = "btn-success";
                $scope.four = "btn-default";

                $scope.roomcost = 60;

                $scope.price = $scope.count * @Model.Tour.TourCost + $scope.count * $scope.roomcost;
                $scope.total = $scope.count * $scope.roomcost + $scope.count * @Decimal.Multiply((decimal)ViewBag.Kur, Model.Tour.TourCost);

            }

            $scope.fourclick = function () {
                $scope.two = "btn-default";
                $scope.three = "btn-default";
                $scope.four = "btn-success";

                $scope.roomcost = 0.00;
                $scope.price = $scope.count * @Model.Tour.TourCost + $scope.count * $scope.roomcost;
                $scope.total = $scope.count * $scope.roomcost + $scope.count * @Decimal.Multiply((decimal)ViewBag.Kur, Model.Tour.TourCost);
            };

            $scope.increment = function () {
                $scope.count++;
                $scope.price = $scope.count * @Model.Tour.TourCost + $scope.count * $scope.roomcost;
                $scope.total = $scope.count * $scope.roomcost + $scope.count * @Decimal.Multiply((decimal)ViewBag.Kur, Model.Tour.TourCost);

            };

            $scope.decrement = function () {
                if ($scope.count == 1) {
                    return;
                }

                $scope.count--;
                $scope.price = $scope.count * @Model.Tour.TourCost + $scope.count * $scope.roomcost;
                $scope.total = $scope.count * $scope.roomcost + $scope.count * @Decimal.Multiply((decimal)ViewBag.Kur, Model.Tour.TourCost);
            };

        });
    </script>
}

cshtml部分如下：

<div class="row" ng-app="myApp" ng-controller="myCtrl">
    <div class="col-sm-4 col-sm-push-8 col-xs-12">
        <aside>
            <div class="infoTitle">
                <h2>Satın Alma Detayları</h2>
            </div>
            <div class="bookDetailsInfo">
                <img src="~/img/TourTypes/@Model.Tour.Cities-.jpg" s alt="image">
                <div class="infoArea">
                    <h3>@Model.Tour.Cities Turu</h3>
                    <ul class="list-unstyled">
                        <li><i class="fa fa-calendar" aria-hidden="true"></i>Tarihlerinde:  <span>@(Html.DisplayFor(t => Model.Tour.StartDate)) / @(Html.DisplayFor(t => Model.Tour.FinalDate)) </span></li>
                        <li><i class="fa fa-home" aria-hidden="true"></i>Oda T&#252;r&#252;:
                            <button class="btn btn-outline {{two}}" ng-click="twoclick();">2 Ki&#351;ilik</button>
                            <button class="btn btn-outline {{three}}" ng-click="threeclick();">3 Ki&#351;ilik</button>
                            <button class="btn btn-outline {{four}}" ng-click="fourclick();">4 Ki&#351;ilik</button>
                                <li>
                                    <i class="fa fa-user" aria-hidden="true"></i>Guests:
                                    <button class="btn btn-default btn-lg" ng-click="decrement();">–</button>
                                    {{count}}
                                    <button class="btn btn-default btn-lg" ng-click="increment();">+</button>
                                </li>
                            </ul>
                <div class="priceTotal">
                    <h2>Total: <span> {{total}}</span></h2>
                </div>
            </div>
        </div>
    </aside>
</div>

出现问题的部分（变量应该动态变化的部分）是这一部分：

<input type="hidden" asp-for="Purchase.Price" ng-value="price">
<input type="hidden" asp-for="Purchase.Remaining" ng-value="price">
<input type="hidden" asp-for="Purchase.NumberofPerson" ng-value="count">

Answer 1

我没有在ng-app="myApp" div中看到这些隐藏的输入。

要在相应的hidden输入字段（绑定）中查看效果，那些输入字段应放在ng-app div中，以便它们将被视为角度应用程序和绑定的一部分自动神奇地在那里更新。

在hidden div中移动ng-app字段可以解决您的问题。

ng值不会在输入标记中动态更改

1 个答案: