Question

我是一名UI开发人员，我是Angular的新手，但是，我理解jQuery。我加入了一家新公司，他们使用Angular JS和JAVA。我被分配了一个任务，过去几天我一直在敲打头。我现在已经进入了扫描仪。

基本上我在.html页面上有一个表格，数据即将到来（对不起，我被告知我需要至少10个声望来发布屏幕截图）。现在我想要该表中的其他列。

我已经尝试在columns_panel.js中添加该列，但默认情况下它还没有进入网格。

我知道我的问题在这里并不清楚，但请相信我，即使我的团队负责人也不愿透露任何事情。

任何JS大师都可以帮助我吗？

<div columns-panel columns="columns" show-panel="showColumnsPanel"></div>

<table class="responsive">
    <thead>
        <tr>
            <th>
            </th>
            <th class="isFlagged">
                <div class="flag"></div>
            </th>

            <th ng-repeat="column in columns" ng-click="sortBy(column)" class="{{ column }}">
                <a class="th-inner">
                    {{ column | translate }}
                    <span ng-show="isSortColumn(column)"
                          ng-class="{'sort-icon-desc': !isSortAscending(),
                            'sort-icon-asc': isSortAscending()}">
                    </span>
                </a>
            </th>
            <!--<th class="toggle-columns-header">-->
            <!--<a class="th-inner" ng-click="showColumnsPanel = !showColumnsPanel">+</a>-->
            <!--</th>-->
        </tr>
    </thead>

    <tbody>
        <tr ng-repeat="dispute in disputes.currentPage"
            ng-class="isSelected(dispute) ? '{{ dispute | disputeTrClass }} checked-dispute' : '{{ dispute | disputeTrClass }}'"
            ng-click="goToDisputeDetails(dispute)">
            <td ng-class="isNegative(dispute) ? 'select-dispute alert-corner' : 'select-dispute'" ng-click="$event.stopPropagation()">
                <input id="select-dispute-{{ dispute.id }}" type="checkbox" ng-click="toggleSelectedDispute(dispute)" ng-checked="isSelected(dispute)" ng-disabled="!dispute.isFlaggable" ng-hide="!dispute.isFlaggable" />
                <label for="select-dispute-{{ dispute.id }}" ng-hide="!dispute.isFlaggable"></label>
            </td>

            <td class="isFlagged" ng-click="toggleFlag(dispute, $event)">
                <div ng-show="dispute.isFlaggable" class="flag {{ dispute.isFlagged ? 'flagged' : 'unflagged' }}"></div>
            </td>

            <td ng-repeat="column in columns" class="{{ column }}">
                <div data-ng-switch data-on="column">
                    <div data-ng-switch-when="reason">
                        {{  dispute[column] }}
                        <span class="reason-code" ng-if="dispute.reason !== 'N/A'">{{ dispute.reasonCode }}</span>
                    </div>
                    <div data-ng-switch-when="status">
                        {{ dispute[column]=="Urgent Response Required"?"Response Required":dispute[column] }}
                    </div>




                    <div data-ng-switch-when="amount">

                        <div ng-if="isNegative(dispute)" class="negative">
                            -<span class="currency">$</span>{{ dispute[column] * -1 | number:2 }}
                        </div>
                        <div ng-if="isPositive(dispute)">
                            <span class="currency">$</span>{{ dispute[column] | number:2 }}
                        </div>
                    </div>





                    <div data-ng-switch-when="dateReceived">
                        {{ dispute[column] | translatedDate }}
                    </div>
                    <div data-ng-switch-when="respondBy">
                        {{ dispute[column] | translatedDate }}
                    </div>
                    <div data-ng-switch-when="respondedOn">
                        {{ dispute[column] | translatedDate }}
                    </div>
                    <div data-ng-switch-default>
                        {{ dispute[column] }}
                    </div>
                </div>
            </td>

            <!--<td class="{{ columns[columns.length - 1] }}"></td>-->
        </tr>
    </tbody>
</table>

<!-- No Disputes To Display -->
<div disputes-table-empty></div>

<!-- Error Message -->
<div disputes-table-error></div>
<style type="text/css">
    .status {
        padding-left: 27px !important;
    }
</style>

这是模型

    DisputeModule.value('Dispute', function (attributes) {
      this.id = attributes.id;
      this.amount = attributes.amount;
      this.cancelDate = attributes.cancelDate;
      this.cancellationNumber = attributes.cancellationNumber;
      this.cancelZone = attributes.cancelZone;
      this.cardDeposit = attributes.cardDeposit;
      this.cardMemberName = attributes.cardMemberName;
      this.cardNumber = attributes.cardNumber;
      this.chargeAmount = attributes.chargeAmount;
      this.chargeDate = attributes.chargeDate;
      this.creditReceived = attributes.creditReceived;
      this.dateReceived = attributes.dateReceived;
      this.disputeNumber = attributes.disputeNumber;
      this.description = attributes.description;
      this.isFlaggable = attributes.isFlaggable;
      this.isFlagged = attributes.isFlagged;
      this.locationID = attributes.locationID;
      this.merchandiseReturned = attributes.merchandiseReturned;
      this.merchandiseType = attributes.merchandiseType;
      this.merchantAccount = attributes.merchantAccount;
      this.modeOfReturn = attributes.modeOfReturn;
      this.originalCardNbr = attributes.originalCardNbr;
      this.payeeLocationId = attributes.payeeLocationId;
      this.payeeSENbr = attributes.payeeSENbr;
      this.reason = attributes.reason;
      this.reasonCode = attributes.reasonCode;
      this.referenceNumber = attributes.referenceNumber;
      this.reservationCanceled = attributes.reservationCanceled;
      this.reservationCanceledDate = attributes.reservationCanceledDate;
      this.stage = attributes.stage;
      this.status = attributes.status;
    });

This is the columns_panel.js

DisputeModule.directive('columnsPanel', function (BASE_URL) {
  var defaultColumns = [
    'disputeNumber',
    'status',
    'dateReceived',
    'respondBy',
    'respondedOn',
    'type',
    'reason',
    'cardNumber',
    'originalCardNbr',
    'transactionDate',
    'referenceNumber',
    'resolution',
    'merchantAccount',
    'locationID',
    'payeeSENbr',
    'payeeLocationId',
    'chargeAmount',
    'amount'
  ];

  var availableColumns = [
    'disputeNumber',
    'status',
    'dateReceived',
    'respondBy',
    'respondedOn',
    'type',
    'reason',
    'cardNumber',
    'originalCardNbr',
    'transactionDate',
    'referenceNumber',
    'resolution',
    'merchantAccount',
    'locationID',
    'payeeSENbr',
    'payeeLocationId',
    'chargeAmount',
    'amount'
  ];
  var columns = defaultColumns.slice();

  return {
    templateUrl: BASE_URL + '/resources/views/columns_panel.html',
    scope: {
      columns: '=',
      showPanel: '='
    },
    controller: function ($scope) {
      function addColumn(column) {
        var tmpColumns = $scope.columns.slice();
        tmpColumns.push(column);
        tmpColumns.sort(function (a, b) {
          return $scope.availableColumns.indexOf(a) - $scope.availableColumns.indexOf(b);
        });
        updateColumns(tmpColumns);
      }

      $scope.columns = columns;
      $scope.availableColumns = availableColumns;

      $scope.isSelected = function (column) {
        return $scope.columns.indexOf(column) > -1;
      };

      $scope.toggleColumn = function (column) {
        var columnIndex = $scope.columns.indexOf(column);
        if (columnIndex === -1) {
          addColumn(column);
        } else {
          $scope.columns.splice(columnIndex, 1);
        }
      };

      $scope.reset = function () {
        updateColumns(defaultColumns.slice());
      };

      $scope.close = function () {
        $scope.showPanel = false;
      };

      function updateColumns(newColumns) {
        $scope.columns = columns = newColumns;
      }
    }
  };
});

我想添加＆＃34; chargeAmount＆＃34; 以显示在网格/表格中

Answer 1

你必须在某个地方有另一列，这列

<div columns-panel columns="columns" show-panel="showColumnsPanel"></div>

尝试添加到您的指令数据（列）。

他们在这里被称为

scope: { columns: '=', showPanel: '=' },
并在此指定范围

$ scope.columns = columns;

所以在您的控制器中尝试查看列中的内容

Angular JS的问题

1 个答案: