5

何らかの理由で、オブジェクトをng-repeat配列に結合すると、結合したものが 2 倍になり、配列の最後のオブジェクトが非表示になります。

ただし、トグル非表示をクリックして を「更新」するとng-repeat、正しいデータが表示されます。

なぜこれが起こるのか、そしてそれを修正するために私ができることを誰かが知っていますか?

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.workflow = {
      flow: [{
        "id": "1334f68db820f664",
        "step_number": 1,
        "tasks": [{
          "id": "1334f68e3f20f665"
        }]
      }, {
        "id": "134967a5ba205f5b",
        "step_number": 2,
        "tasks": [{
          "id": "134972c5b420e027"
        }]
      }, {
        "id": "1334f68e7d209ae6",
        "step_number": 3,
        "tasks": [{
          "id": "1334f68ef6209ae7"
        }]
      }]
    };

    $scope.insertStep = function() {

      var insertStepIndex = 1,
        task_data = {
          "id": null,
          "step_number": (insertStepIndex + 2),
          "tasks": []
        };

      //go through each item in the array
      $.each($scope.workflow.flow, function(index, step) {
        //if the step number is greater then the place you want to insert it into, increase the step numbers
        if (step.step_number > $scope.workflow.flow[insertStepIndex].step_number) step.step_number++;
      });

      $scope.workflow.flow.splice((insertStepIndex + 1), 0, task_data);

    }

    $scope.toggleHide = function() {
      $scope.hide = !$scope.hide;
    }


  });
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">

  <div ng-click="insertStep()">Insert Step</div>
  <br />
  <br />

  <div ng-click="toggleHide()">Toggle Repeat</div>
  <br />
  <br />

  <div ng-if="!hide">
    <div ng-repeat="data in workflow.flow | orderBy:'+step_number'" ng-init="$stepIndex = workflow.flow.indexOf(data)">
      {{ workflow.flow[$stepIndex].step_number }}
    </div>
  </div>
</div>

4

1 に答える 1

2

問題が発生しました。これはトリッキーですが、単純な部分です。ng-initディレクティブは 1 回だけ実行されます。したがって、新しいデータを配列/リストにプッシュしても、への割り当て$stepIndex = workflow.flow.indexOf(data)は更新されません。

したがって、スコープ関数を追加すると、Angular が値の変更を返すときに関数を自動的に呼び出すため、この問題が修正されます。

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.workflow = {
      flow: [{
        "id": "1334f68db820f664",
        "step_number": 1,
        "tasks": [{
          "id": "1334f68e3f20f665"
        }]
      }, {
        "id": "134967a5ba205f5b",
        "step_number": 2,
        "tasks": [{
          "id": "134972c5b420e027"
        }]
      }, {
        "id": "1334f68e7d209ae6",
        "step_number": 3,
        "tasks": [{
          "id": "1334f68ef6209ae7"
        }]
      }]
    };

    $scope.insertStep = function() {

      var insertStepIndex = 1
      var task_data = {
        "id": null,
        "step_number": (insertStepIndex + 2),
        "tasks": []
      };

      //go through each item in the array
      angular.forEach($scope.workflow.flow, function(step, index) {
        //if the step number is greater then the place you want to insert it into, increase the step numbers
        if (step.step_number > $scope.workflow.flow[insertStepIndex].step_number) step.step_number++;
      });

      $scope.workflow.flow.splice((insertStepIndex + 1), 0, task_data);

    }

    // This is a new function which I added to fix the problem
    $scope.getIndex = function(data) {
      return $scope.workflow.flow.indexOf(data);
    };

    $scope.toggleHide = function() {
      $scope.hide = !$scope.hide;
    };

  });
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">

  <div ng-click="insertStep()">Insert Step</div>
  <br />
  <br />

  <div ng-click="toggleHide()">Toggle Repeat</div>
  <br />
  <br />

  <div ng-if="!hide">
    <div ng-repeat="data in workflow.flow | orderBy:'+step_number'">
      {{ workflow.flow[getIndex(data)].step_number }}
    </div>
  </div>
</div>

于 2016-08-17T04:21:10.607 に答える