Question

我已订购列表并使用了track by $index。但似乎，列表没有排序。

<div ng-controller="MyCtrl">
  <div ng-repeat="rfi in rfiList | orderBy:['name', 'status'] track by $index">
    <p>
      {{rfi.name}}==>{{rfi.status}}
      <button ng-click="search($index)">OK      
     </button>
    </p>
  </div>
</div>

而javascript部分是

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.rfiList = [{
      name: 'GHI',
      status: true
    },
    {
      name: 'GHI',
      status: false
    },
    {
      name: 'DEF',
      status: true
    },
    {
      name: 'DEF',
      status: false
    },
    {
      name: 'ABC',
      status: true
    },
    {
      name: 'JKL',
      status: true
    }
  ];

  $scope.search = function(index) {
    alert('Index is=' + index + ' and value is=' + $scope.rfiList[index].name + '-->' + $scope.rfiList[index].status);
  };
}

这里发生的是，在search方法中，rfiList [index]在更改列表顺序后没有获取值。

订购列表后如何使用索引获取值？

这是jsfiddle

中的代码

Answer 1

尝试一下：

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.rfiList = [{
      name: 'GHI',
      status: true
    },
    {
      name: 'GHI',
      status: false
    },
    {
      name: 'DEF',
      status: true
    },
    {
      name: 'DEF',
      status: false
    },
    {
      name: 'ABC',
      status: true
    },
    {
      name: 'JKL',
      status: true
    }
  ];

  $scope.search = function(index,rfi) {
    alert('Index is=' + index + ' and value is=' + rfi.name + '-->' + rfi.status);
  };
}

和您的html

<div ng-controller="MyCtrl">
  <div ng-repeat="rfi in rfiList | orderBy:['name', 'status'] track by $index">
    <p>
      {{rfi.name}}==>{{rfi.status}}
      <button ng-click="search($index, rfi)">OK      
     </button>
    </p>
  </div>
</div>

Answer 2

由于管道/过滤器，列表在代码的前端部分排序，而不是在控制器本身中排序。

如果您需要控制器侧的有序列表，请尝试在控制器本身中对其进行排序。

希望有帮助。

Answer 3

请按照以下代码操作，效果很好：

HTML

<div ng-controller="MyCtrl">
  <div ng-repeat="rfi in rfiList | orderBy:name:status track by $index"> 

    <p>
      {{rfi.name}}==>{{rfi.status}}
      <button ng-click="search($index)">OK      
     </button>
    </p>
  </div>
</div>

JS

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.rfiList = [{
      name: 'GHI',
      status: true
    },
    {
      name: 'GHI',
      status: false
    },
    {
      name: 'DEF',
      status: true
    },
    {
      name: 'JKL1',
      status: true
    },
    {
      name: 'DEF',
      status: false
    },
    {
      name: 'ABC',
      status: true
    }
  ];

  $scope.search = function(index) {
    console.log($scope.rfiList[index]);
    alert('Index is=' + index + ' and value is=' + $scope.rfiList[index].name + '-->' + $scope.rfiList[index].status);
  };
}

Orderby和$ index跟踪在AngularJS中不起作用

3 个答案: