Question

我有以下代码：

<div ng-repeat="data in workflow.flow | orderBy:'+step_number'">
    index: {{$index}}  - 
    step: {{ data.step_number }} - 
    arrayStep: {{ workflow.flow[$index].step_number }}
</div>

我得到的是以下内容，这使得NO SENSE：

index: 0 - step: 1 - arrayStep: 1
index: 1 - step: 2 - arrayStep: 2
index: 2 - step: 3 - arrayStep: 4
index: 3 - step: 4 - arrayStep: 5
index: 4 - step: 5 - arrayStep: 3

理论上，step和arrayStep应该完全相同，但我不知道为什么它不是这样。

有谁知道为什么会发生这种情况？

$ scope.workflow.flow

[
  {
    "id":"1334f68db820f664",
    "step_number":1,
    "tasks":[ { "id":"1334f68e3f20f665" } ]
  },
  {
    "id":"1349735b4720857a",
    "step_number":2,
    "tasks":[]
  },
  {
    "id":"134967a5ba205f5b",
    "step_number":4,
    "tasks":[ { "id":"134972c5b420e027" } ]
  },
  {
    "id":"1334f68e7d209ae6",
    "step_number":5,
    "tasks":[ { "id":"1334f68ef6209ae7" } ]
  },
  {
    "id":"13496c4b2a208575",
    "step_number":3,
    "tasks":[]
  }
]

Answer 1

ng-repeat创建了一个新范围，$index只是一个简单的循环计数器＆＃34;，如果愿意的话。在orderBy中应用ng-repeat过滤器不会更改循环数组中元素的顺序，它只是控制它们在结果输出中的显示顺序。如果您需要数组元素的实际索引，则必须使用.indexOf()。这是一个例子：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="data in workflow.flow | orderBy:'+step_number'">
    index: {{$index}} - step: {{ data.step_number }} - arrayStep: {{ workflow.flow.indexOf(data) }}
  </div>
</div>

＆＃13;

Answer 2

您应该能够将有序列表输出到新变量并从那里开始：

<div ng-repeat="data in orderedList = (workflow.flow | orderBy:'+step_number')">
    index: {{$index}}  - 
    step: {{ data.step_number }} - 
    arrayStep: {{ orderedList[$index].step_number }}
</div>

您现在可以将ordered作为新排序列表。

Answer 3

你是对的@Lex让我稍微扩展你的答案。我认为这符合你的要求@bryan

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

  

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <div ng-app="app" ng-controller="ctrl">
      <div ng-repeat="data in orderedList = (workflow.flow | orderBy:'+step_number')">
    index: {{$index}}  - 
    step: {{ data.step_number }} - 
    arrayStep: {{ orderedList[$index].step_number }}
</div>
    </div>

ng-repeat输出异常结果

$ scope.workflow.flow

3 个答案: