如何在 AngularJs 的编辑视图中显示数据

Question

我是 AngularJS 的新手。我正在一个使用 ASP.Net MVC 和 AngularJS 的网站上工作。该站点提供基本功能添加/更新/删除/检索。我正在使用角度路由来浏览网站。路由代码如下：

var app = angular.module("paymentApp", ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "payment/EditPayment/1",
            controller: "paymentController"
        })
        .when("/MakePayment", {
            templateUrl: "payment/MakePayment",
            controller: "paymentController"
        })
        .when("/SearchPayment", {
            templateUrl: "payment/SearchPayment",
            controller: "paymentController"
        })
        .when("/EditPayment/:payid", {
            templateUrl: function (params) { return "payment/EditPayment/" + params.payid },
            controller: "paymentController"
        })
        .when("/DeletePayment/:id", {
            templateUrl: function (params) { return "payment/DeletePayment/" + params.id },
            controller: "paymentController"
        })
        .when("/Flush", {
            templateUrl: "payment/InvalidateCacheForIndexAction",
            controller: "paymentController"
        });
    $locationProvider.html5Mode(true).hashPrefix('');
});

您可以从上面给出的代码中看出，我正在调用 MVC 操作方法来显示 MakePayment/SearchPayment 视图，这些视图没有任何要显示的预填充数据，因为用户需要在这些视图中输入数据。但是，EditPayment 视图将包含之前进行的付款数据。我的路由代码只是要拉出没有值的 EditPayment 视图。我不确定在该视图中显示现有数据的正确方法是什么。

我的 EditPayment.cshtm 代码如下：

<h2>Edit Payment</h2>

<div ng-controller="paymentController" class="row">
    <div class="col-md-8">
        <section id="paymentForm">
            <form class="form-horizontal">

                @Html.AntiForgeryToken()
                <h4>Edit payment</h4>
                <hr />
                <span class="text-danger" ng-show="false">Validation error summary</span>
                <div ng-show="confCode">
                    <label style="background-color:darkseagreen;">Payment has been made successfully. Confirmation code: {{confCode}}</label>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Payment Id</label>
                    <div class="col-md-10">
                        <input type="number" class="form-control" ng-model="paymentId" readonly />
                        <span class="text-danger" ng-show="false">Payment Id required</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Biller Id</label>
                    <div class="col-md-10" name="BillerId" id="BillerId">
                        <select class="form-control" ng-model="billerId" ng-init="billerId='0'">
                            <option disabled hidden value="0">Select biller</option>
                            <option value="1">Idea</option>
                            <option value="2">Airtel</option>
                            <option value="3">Vodafone</option>
                            <option value="4">Jio</option>
                        </select>
                        <span class="text-danger" ng-show="false">Biller Id required</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Bill Account</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" ng-model="billAccount" />
                        <span class="text-danger" ng-show="false">Bill account required</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Payment amount</label>
                    <div class="col-md-10">
                        <input type="number" class="form-control" ng-model="paymentAmount" />
                        <span class="text-danger" ng-show="false">Payment amount required</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Fee amount</label>
                    <div class="col-md-10">
                        <input type="number" class="form-control" ng-model="feeAmount" value="1.0" readonly />
                        <span class="text-danger" ng-show="false">Fee amount required</span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">Platform</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" ng-model="platform" value="1.0" readonly />
                        <span class="text-danger" ng-show="false">Platform required</span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Pay" class="btn btn-default" ng-click="makePayment()" />
                    </div>
                </div>
            </form>
        </section>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

我的 paymentController.js 看起来像：

app.controller("paymentController", function ($scope, $rootScope, $routeParams, paymentService) {    
    $scope.paymentId;
    $scope.billerId;
    $scope.billAccount;
    $scope.paymentAmount;
    $scope.feeAmount=1.0;
    $scope.platform = 1;
    $scope.confCode;
    $scope.makePayment = function () {
        var payment = {
            BillerId: $scope.billerId,
            BillAccount: $scope.billAccount,
            PayAmt: $scope.paymentAmount,
            FeeAmt: $scope.feeAmount,
            Platform: $scope.platform,
        };
        paymentService.makePayment(payment).then(function (response) {
            $scope.confCode = response.data.ConfCode;
        });
    };

    $scope.searchPayment = function () {        
        var searchPay = {
            BillerId: $scope.billerId,
            BillAccount: $scope.billAccount
        };
        paymentService.searchPayment(searchPay).then(function (response) {
            $scope.payments = response.data;            
        });
    };
});

另外，我使用相同的控制器进行添加/更新/编辑/删除。这是正确的方法吗？

Answer 1

首先，说使用相同的控制器来添加/更新/编辑/删除是好还是坏主要是一个角度问题；在我看来，当你计划做一个大系统时，这不是最好的方法，或者至少你计划将你的应用程序扩展到一个更大的系统。它变得混乱和非生产性，因为许多功能是在一起的，即使它们有时差异很大。这应该在您的特定情况下进行评估，并在重用代码和使事情清晰和分离之间找到平衡，始终寻找整洁、干净和可重用的代码。

关于如何填充您的编辑视图，您只需从路由中获取 payid 并使用它从后端检索信息。

顺序应该是这样的：

• 用户点击编辑支付，（你在路由中添加payid）

• 您加载了 EditPayment 视图（因此这会启动 paymentController）

• 在加载paymentController 的那一刻，您会在这样的路线上检查payid：$route.current.params.payid

• 如果$route.current.params.payid 存在，则意味着您的视图应该加载与该付款相关的数据（为了获取此数据，您可能已经提供了服务）

• 从后端检索数据后，将其绑定到视图模型。

• 完成！ EditPayment 现在应该显示与该特定付款相关的数据。