각도 JS의 문제

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> 

이 모델입니다

내가 그리드에 표시 "chargeAmount"을 추가 할

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; 
     } 
    } 
    }; 
}); 

당신이 어딘가에이 열을 다른 열이 있어야합니다

Answer 1

1. /테이블

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

지시문 데이터 (열)에 추가하려고합니다.

1. 그들은 여기

   scope: { columns: '=', showPanel: '=' },

라고 여기

$ scope.columns = 열이 지침의 범위에 준하고 있습니다;

그래서 당신의 컨트롤러에 당신이 열