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

时间:2018-07-31 04:44:43

标签: javascript html angularjs

我已订购列表并使用了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

中的代码

3 个答案:

答案 0 :(得分:2)

尝试一下:

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>

答案 1 :(得分:1)

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

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

希望有帮助。

答案 2 :(得分:0)

请按照以下代码操作,效果很好:

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