在AngularJS中的ng-repeat中访问并增加$ scope变量

时间:2019-04-29 05:17:18

标签: angularjs angularjs-directive

我有以下代码

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

        }
    }

在第一<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 :(得分:0)

如果您想执行任何操作而不输出任何内容,请尝试使用ng-init

  async create(args) {
    return await this.prismah.mutation.createUser({
      name: args.name,
      email: args.email,
    });
  }