ng-repeat 在拼接上重复项目而不是显示最后一个项目

Question

我有以下 ng-repeat 可以正常工作。

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

$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" } ]
  }
]

这是它在我的 html 中的显示方式：

1 
2
3

我有以下函数，可以在数组中间添加一个步骤：

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

}

出于某种原因，id 为 1334f68e7d209ae6 的数组已更改为 step_number: 4，但在 ng-repeat

中完全被忽略

这是显示的内容：

当我 console.log $scope.workflow.flow 这是我看到的：

[
  {
    "id":"1334f68db820f664",
    "step_number":1,
    "tasks":[ { "id":"1334f68e3f20f665" } ]
  },
  {
    "id":"134967a5ba205f5b",
    "step_number":2,
    "tasks":[ { "id":"134972c5b420e027" } ]
  },
  {
    "id":null,
    "step_number":3,
    "tasks":[]
  },
  {
    "id":"1334f68e7d209ae6",
    "step_number":4,
    "tasks":[ { "id":"1334f68ef6209ae7" } ]
  }
]

有人知道为什么会这样吗？

下面是一段代码：

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);
      
      console.log($scope.workflow.flow);
  }


  });

  

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

Answer 1

因为ng-init只运行一次，更新数组时不会再一次。我必须改用这个：

$scope.getIndex = function(data) {
  return $scope.workflow.flow.indexOf(data);
};

像这样：

{{ workflow.flow[getIndex(data)].step_number }}

Answer 2

你为什么不这样做：

<div ng-app="app" ng-controller="ctrl">

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

  <div ng-repeat="data in workflow.flow | orderBy:'+step_number'">
    {{ data.step_number }}
  </div>
</div>

您不必自己计算索引。我稍微更改了您的代码段。不再使用 ng-init，并使用 data.step_number 而不是 workflow.flow[getIndex(data)].step_number。

您也不必使用 splice，您可以只使用 push，因为您已经在 ng-repeat 中按 step_number 进行了排序（除非您确实需要数组中的正确位置）。

片段

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

      // you don't have to use splice at all, since you're ordering by step_number in ng-repeat, you could just push it (unless you really need the objects in the right place inside the array):

      $scope.workflow.flow.push(task_data);

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


  });

  

<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-repeat="data in workflow.flow | orderBy:'+step_number'">
        {{ data.step_number }}
      </div>
    </div>

ng-repeat 在拼接上重复项目而不是显示最后一个项目

ng-repeat repeating item on splice instead of showing last item

javascript

angularjs

angularjs-ng-repeat

angularjs-orderby

$scope.workflow.flow

下面是一段代码：

片段