Question

我正在使用Angular指令对表行进行orderBy，数据来自服务的对象数组。

<tr ng-repeat="album in vm.albums | orderBy: album.data.title">

    <td>{{album.data.title}}</td>
    <td>{{album.data.date}}</td>
    <td>{{album.data.type}}</td>
    <td>{{album.data.username}}</td>
</tr>

这是我的vm.albums数组的样子：

vm.albums ---> [>Object1, >Object2, >Object3......]

每个对象看起来像foll：

Object1 ---> {slug: "my-title", data: Object}
Object2 ---> {slug: "beta-title", data: Object}
Object3 ---> {slug: "alpha-title", data: Object}

对象Object1.data或vm.albums数组中的任何对象如下所示：

Object1.data ---> {title: "My Title", date: "2015-04-06", type: "Blue", username: 'rust'}
Object2.data ---> {title: "Beta Title", date: "2012-04-07", type: "Orange", username: 'badname'}
Object3.data ---> {title: "Alpha Title", date: "2013-09-06", type: "Lemons", username: 'xerox'}

我仍然没有使用我正在使用的<td>在我的表格中获得正确的排序orderBy。不确定我做错了什么。任何线索？

Answer 1

看看https://docs.angularjs.org/api/ng/filter/orderBy

你应该传递一个表达式而不是一个变量

返回一个数组，其中包含指定集合中的项目，由比较器函数根据使用表达式谓词计算的值排序。

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.vm = {
      albums: [{
        slug: "m",
        data: {
          title: "My Title",
          date: "2015-04-06",
          type: "Blue",
          username: 'rust'
        }
      }, {
        slug: "m",
        data: {
          title: "Beta Title",
          date: "2012-04-07",
          type: "Orange",
          username: 'badname'
        }
      }, {
        slug: "m",
        data: {
          title: "Another Title",
          date: "2015-04-06",
          type: "Blue",
          username: 'rust'
        }
      }, ]
    }

  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <table>
    <tbody>
      <tr ng-repeat="album in vm.albums | orderBy: 'data.title'">
        <td>{{album.data.title}}</td>
        <td>{{album.data.date}}</td>
        <td>{{album.data.type}}</td>
        <td>{{album.data.username}}</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

试

<tr ng-repeat="album in vm.albums | orderBy: 'data.title'">
  <td>{{album.data.title}}</td>
  <td>{{album.data.date}}</td>
  <td>{{album.data.type}}</td>
  <td>{{album.data.username}}</td>
</tr>

AngularJS命令没有按预期工作

2 个答案: