Доступ и увеличение переменной $ scope внутри ng-repeat в AngularJS - PullRequest
Новая
       20

Доступ и увеличение переменной $ scope внутри ng-repeat в AngularJS

0 голосов
/ 29 апреля 2019

У меня есть следующий код 

  <tbody>

  <!-- 1st TR -->
  <tr ng-repeat="person in applicantData">
    <td>
      <input ng-model="person.Name" ng-disabled="!enabledEdit[{{$index+$parent.rowIndex}}]" required/>
    </td>
    <td>
      <input ng-model="person.Title__c" ng-disabled="!enabledEdit[{{$index+$parent.rowIndex}}]" />
    </td>
    <td>
      <select class="fixed-width" ng-model="person.Selection__c" ng-options="d.name as d.name for d in infoDesignationList"
        ng-disabled="!enabledEdit[{{$index+$parent.rowIndex}}]"></select>
    </td>
    <td>
      <input ng-model="person.Email_Address__c" ng-disabled="!enabledEdit[{{$index+$parent.rowIndex}}]" required />
    </td>
    <td>
      <div class="buttons" align="center">
        <button class="btn" ng-disabled="isReadOnly" ng-click="editPerson($index+$parent.rowIndex)"><i class="fa fa-edit"></i></button>
      </div>
    </td>
  </tr>

  <!-- 2nd TR : incrementing the scope variable here -->
  <tr style="display:none;">
    <div style="display:none;">{{$parent.rowIndex = $parent.rowIndex + applicantData.length }}</div>  
  </tr>

  <!-- 3rd TR : Another one -->
  <tr ng-repeat="person in guarantorData">
    <td>
      <input ng-model="person.Name" ng-disabled="!enabledEdit[{{$index+$parent.rowIndex}}]" required/>
    </td>
    <td>
      <input ng-model="person.Title__c" ng-disabled="!enabledEdit[{{$index+$parent.rowIndex}}]" />
    </td>
    <td>
      <select class="fixed-width" ng-model="person.Selection__c" ng-options="d.name as d.name for d in infoDesignationList"
        ng-disabled="!enabledEdit[{{$index+$parent.rowIndex}}]"></select>
    </td>
    <td>
      <input ng-model="person.Email_Address__c" ng-disabled="!enabledEdit[{{$index+$parent.rowIndex}}]" required />
    </td>
    <td>
      <div class="buttons" align="center">
        <button class="btn" ng-disabled="isReadOnly" ng-click="editPerson($index+$parent.rowIndex)"><i class="fa fa-edit"></i></button>
      </div>
    </td>
  </tr>
</tbody>

И моя директива, 

var directive = function(Settings, ApplicationDataSource, AssetDataSource) {
        var dir = {};
        dir.restrict = 'E';
        dir.templateUrl = Settings.getResourceBasePath() + 'Components/core/template/SignatureTemplate.html';
        dir.scope = {
            appId:      '=',
            isReadOnly: '=?',
        };

        dir.controller = ['$scope', '$timeout', function($scope, $timeout) {
            $scope.isReadOnly = ( typeof $scope.isReadOnly === 'undefined' || $scope.isReadOnly === null ) ? true : $scope.isReadOnly;

            $scope.applicantData = [];
            $scope.guarantorData = [];

            $scope.rowIndex = 0;

            $scope.init = function() {

                if ($scope.appId === undefined || $scope.appId == '') return false;   

                $scope.resetEnableEdit();

                $scope.getApplication($scope.loadApplication); // here I update the $scope.applicantData;
                $scope.getGuarantors($scope.loadPrincipals);  // here I update the $scope.guarantorData;
            };

        }
    }

В 1-м <tr> я зацикливаюсь на ApplicantData .

Здесь я использовал ng-disabled="!enabledEdit[{{$index+$parent.rowIndex}}]",

т.е. $index+$parent.rowIndex как индекс массива enabledEdit.

Я хочу увеличить этот индекс $index+$parent.rowIndex в целом. Для этого я написал 

  <!-- 2nd TR : incrementing the scope variable here -->
  <tr style="display:none;">
    <div style="display:none;">{{$parent.rowIndex = $parent.rowIndex + applicantData.length }}</div>  
  </tr>

Но он работает не так, как ожидалось. Даёт,

enter image description here

enter image description here

При глубоком погружении выдается ошибка на $scope.$apply() в одном из методов директивы.

Но если я ставлю индекс вручную, он работает нормально. 

<tbody>
  <!-- 1st TR -->
  <tr ng-repeat="person in applicantData">
    <td>
      <input ng-model="person.Name" ng-disabled="!enabledEdit[{{$index+0}}]" required/>
    </td>
    ...
  </tr>

  <!-- 3rd TR : Another one -->
  <tr ng-repeat="person in guarantorData">
    <td>
      <input ng-model="person.Name" ng-disabled="!enabledEdit[{{$index+1}}]" required/>
    </td>
  </tr>
</tbody>

В чем проблема в моем коде?

1 Ответ

0 голосов
/ 29 апреля 2019

попробуйте использовать ng-init, если вы хотите выполнить какое-либо действие, ничего не выводя 

<tr style="display:none;">
    <div style="display:none;" ng-init="$parent.rowIndex += applicantData.length"></div>  
</tr>
...