javascript - Angular ng-click 函数填充表格？

Question

所以我有这些框显示使用 ng-repeat 创建的数组的最少信息。可能会返回 1 和 10 个带有对象及其属性的项目。这些框是可单击的，单击后应填充表格。问题是，我不断收到引用错误，对于像我这样的人来说，不明白为什么。该函数已定义，应根据框的 ID 调用并填充表格，以使用更多信息填充表格。数组对象称为“swipe”。

我的盒子 html:

<div  class="swipeBoxes" ng-repeat="swipe in swipes">
    <a href="" ng-click="editSwipe(swipe.id)" >
        <div class="swipeBox col-md-12">
            <div class="col-md-12 claimObject">
                <span class="claimLine" style="width: 3px; position: absolute; top: 5px; left: 5px;">{{ $index + 1 }}.</span>
                <span class="claimedLeft">swipe date:</span>
                <span class="claimedRight">{{ swipe.date | date: 'MM/dd/yyyy'}}</span>
            </div>
            <div class="col-md-12 claimObject">
                <span class="claimedLeft">provider:</span
                ><span class="claimedRight">{{ swipe.merchant }}</span>
            </div>
            <div class="col-md-12 claimObject">
                <span class="claimedLeft">amount:</span>
                <span class="claimedRight">{{ swipe.amount | currency }}</span>
            </div>
        </div>
    </a>
</div>

从上面选择其中一个对象后，我的目标表应该填充数据:

<div class="swipeDetails col-md-12">
    <div class="swipeFlexHead col-md-12">
        <p>Swipe Details</p>
    </div>
    <div class="swipeFlexHead2 col-md-12">
        <p>{{ swipe.merchant }}</p>
    </div>
    <div class="col-md-12">
        <div class="swipeFlexElement col-md-4">
            <p>Swipe Date</p>
            <p>{{ swipe.date | date: 'MM/dd/yyyy' }}</p>
        </div>
        <div class="swipeFlexElement col-md-4">
            <p>Status</p>
            <p>{{ swipe.status }}</p>
        </div>
        <div class="swipeFlexElement col-md-4">
            <p>Card Used</p>
            <p>{{ swipe.cardHolder }} {{ swipe.cardUsed }}</p>
        </div>
    </div>    
    <div class="col-md-12">                                            
        <div class="swipeFlexElement col-md-4">
            <p>Swipe Amount</p>
            <p>{{ swipe.amount | currency }}</p>
        </div>
        <div class="swipeFlexElement col-md-4">
            <p>Amount Requiring Documentation</p>
            <p>{{ swipe.reqAmount | currency }}</p>
        </div>
        <div class="swipeFlexElement col-md-4">
            <p>Documentation Due Date</p>
            <p>{{ swipe.dueDate | date: 'MM/dd/yyyy' }}</p>
        </div>                                                                                                                        
    </div>
</div>

最后，我的 Controller 正在提取数据并具有“editSwipe”功能:

app.controller('swipeController', ['$scope', 'swipesService', '$location', 'Upload', '$timeout', '$filter', 'utilsService',
  function ($scope, swipesService, $location, Upload, $timeout, $filter, utilsService) {

    $scope.swipes = [];
    $scope.swipeFormSubmitted = false;

    swipesService.getSwipes().then(function (results) {

        $scope.swipes = results.data;

    }); 

    $scope.swipe = {
        id: '',
        descr: '',
        merchant: '',
        date: '',
        amount: '',
        reqAmount: '',
        status: '',
        cardUsed: '',
        cardHolder: '',
        dueDate: ''
    }

    $scope.editSwipe = function(id) {
        $scope.swipeInfo = angular.copy(swipe);
    };

}]);

Answer 1

在您的 editSwipe 函数中，您没有对 id 执行任何操作。使用 angular.copy(swipe) ，您正在使用未定义的 swipe 。我猜你想复制你点击的滑动，那么你需要这样做

ng-click="editSwipe(swipe)"

$scope.editSwipe = function(swipe) {
    $scope.swipe = angular.copy(swipe); // I don't see where you use swipeInfo?
};

顺便说一句:是否需要深度复制滑动？你不能只传递引用$scope.swipe = swipe;