Angular / html中的OrderBy

Question

我有以下代码：

<div flex="66">
            <h3>{{ hack.title }}</h3>
            <h4>{{ hack.description }}</h4>
            <h4>{{ hack.status }}</h4>
            <p>Backs: {{ hacksCtrl.getBacks(hack.id) }}</p>
          </div>

我基本上想按Backs顺序来表示likes ，所以喜欢的东西越多，它出现在页面上的位置就越高。

所以我做到了，但没有用：

ng-repeat="hack in hacksCtrl.hacks | orderBy: hacksCtrl.getBacks()"

有任何想法吗？

谢谢

下面的控制器：

 import Chance from 'chance';
export default function(hack, $state, $sce, HacksService, user) {
  const vm = this;
  vm.hack = hack;

  vm.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  };

  vm.save = function() {
    HacksService.save(vm.hack);
    $state.go('hacks.view', {
      id: vm.hack.id
    });
  };

  vm.create = function() {
    const chance = new Chance();

    vm.hack.id = chance.guid();
    vm.hack.status = 'proposed';
    vm.hack.createdBy = user.name;
    vm.hack.userProfileImage = user.picture;
    HacksService.create(vm.hack);
    $state.go('hacks.view', {
      id: vm.hack.id
    });
  };

  vm.like = function(id, $event) {
    $event.stopPropagation();
    HacksService.like(id, user);
  };
  vm.hasLiked = function() {
    const userId = user.id;
    const likes = vm.hack.likes;

    if (likes) {
      return (likes.indexOf(userId) !== -1);
    }
  };
  vm.getLikes = function() {
    return (vm.hack.likes) ? vm.hack.likes.length : 0;
  };

  vm.isCreate = function() {
    return !vm.hack;
  };

  vm.goToEdit = function(id) {
    $state.go('hacks.edit', {
      id: id
    });
  };
}

Answer 1

您的getBacks函数缺少id参数。

编辑：检查getBacks函数，并检查它返回的值是否是您期望的值。 我不确定从您的代码中是否分别获取该数据。

Answer 2

对于您的函数，传入整个hack对象，然后仅在orderBy语句中命名该函数

vm.getBacks = function(hack) {
    return (hack.backers) ? hack.backers.length : 0;
};

您的角度重复看起来像这样：

ng-repeat="hack in hacksCtrl.hacks | orderBy: hacksCtrl.getBacks"

Answer 3

它不起作用，因为如Angular文档中所述 ，orderBy期望其参数为以下之一：

• function ：吸气功能。 该函数的结果将使用< ， === ， >运算符进行排序。

• string ：一个角度表达式。 此表达式的结果用于比较元素（例如，name用来按名为name的属性进行排序或name.substr（0，3）来按称为name的属性的3个首字符进行排序）。 常量表达式的结果被解释为要在比较中使用的属性名称（例如，“特殊名称”用于按对象的特殊名称属性的值对对象进行排序）。 表达式可以选择以+或-作为前缀，以控制升序或降序排序（例如+ name或-name）。 如果未提供任何属性（例如“ +”），则使用数组元素本身比较在何处排序。

• Array ：函数或字符串谓词的数组。 数组中的第一个谓词用于排序，但是当两项相等时，使用下一个谓词。

hackCtrls.getBack(hack.id)并非以上所述。

因此，要解决您的问题，您可以将回调传递给orderBy，也可以将“ like”属性绑定到hacks上并按属性名称排序：

1. ng-repeat="hack in hacksCtrl.hacks | orderBy: hacksCtrl.getBacks" ，修改getBacks将是：

    vm.getBacks = function(hack) { return hack.backers ? hack.backers.length : 0; } 

   vm.hacks = [/* multiple hacks */]是必要的

2. 假设hack具有like属性ng-repeat="hack in hacksCtrl.hacks | orderBy: 'likes' hack。