Angular ng-click 函数填充 table？

Question

所以我有这些框显示使用 ng-repeat 创建的数组的最少信息。可能有 1 项和 10 项与对象及其属性一起返回。这些框是可单击的，单击后应填充 table。问题是，我不断收到参考错误，对于像我这样的人，不明白为什么。该函数已定义，应根据框的 Id 调用并填充 table，以用更多信息填充 table。数组对象称为 "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>

一旦从上面选择了其中一个对象，我的目标 table 应该填充数据：

<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>

最后，我的控制器正在提取数据并具有 '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)，您使用的是未定义的滑动。我想你想复制你点击的滑动，那么你需要做

ng-click="editSwipe(swipe)"

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

BTW：滑动有没有必要深度复制？你不能只传递引用 $scope.swipe = swipe;

Angular ng-click 函数填充 table？

Angular ng-click function populates table?

html

javascript

angularjs

angularjs-ng-click