在项目的后续ngrepeat财产订单项目 [英] order item in ngrepeat follow property of item

问题描述

我如何订购后，以自上而下的结构（具有最高的帖子喜欢数量将是第一个和最后一个是后其最低喜欢号）。要做到这一点我设置 oderBy：likes.length ，但它不工作。请帮帮忙，谢谢！

 函数myController的（$范围）{
        $ scope.posts = [{称号：AAtitle
                        内容：AAcontent
                        喜欢：PERSON1，PERSON2，Person3可能]
                       }，
                       {称号：BBtitle
                        内容：BBcontent
                        喜欢：person10]
                       }，
                        {称号：CCtitle
                        内容：CCcontent
                        喜欢：person10，person11，person100，PERSON1，PERSON2]
                       }
                      ]
    }    ＆LT; D​​IV NG控制器=myController的＆GT;
      ＆LT; UL＆GT;
        ＆LT;李NG重复=帖子在帖子| oderBy：likes.length＆GT;
               ＆LT; D​​IV＆GT; {{post.title}}＆LT; / DIV＆GT;
               ＆LT; D​​IV＆GT; {{post.content}}＆LT; / DIV＆GT;
               ＆LT; D​​IV＆GT; {{post.likes.length}}＆LT; / DIV＆GT;
        ＆LT; /李＆GT;
      ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
 

解决方案

您可以编写一个函数在视图中显示前做在控制器​​中的排序。或preferable，你可以写一个自定义过滤器

过滤器：

  angular.module（'YourAppName'，[]）
.filter（'orderByLikes'，函数（）{
    功能比较（A，B）{
        返回b.likes.length  -  a.likes.length;
    }
    返回功能（输入）{
        返回input.sort（比较）;
    }
}）;
 

查看：

 ＆LT; D​​IV NG控制器=myController的＆GT;
  ＆LT; UL＆GT;
    ＆LT;李NG重复=帖子在帖子| orderByLikes：帖子＆GT;
           ＆LT; D​​IV＆GT; {{post.title}}＆LT; / DIV＆GT;
           ＆LT; D​​IV＆GT; {{post.content}}＆LT; / DIV＆GT;
           ＆LT; D​​IV＆GT; {{post.likes.length}}＆LT; / DIV＆GT;
    ＆LT; /李＆GT;
  ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

下面是一个工作小提琴

How can I order the post to top-down structure (the post which has highest likes number will be first and the last is the post which lowest likes number). To do that I set oderBy:likes.length but it is not work. Please help, thanks!

 function MyController($scope) {
        $scope.posts = [{"title": "AAtitle",
                        "content":"AAcontent",
                        "likes":["person1", "person2", "person3"]
                       },
                       {"title": "BBtitle",
                        "content":"BBcontent",
                        "likes":["person10"]
                       },
                        {"title": "CCtitle",
                        "content":"CCcontent",
                        "likes":["person10","person11", "person100", "person1", "person2"]
                       }
                      ]
    }

    <div ng-controller = "MyController">
      <ul>
        <li ng-repeat = "post in posts | oderBy: likes.length">
               <div> {{post.title}} </div>
               <div> {{post.content}} </div>
               <div> {{post.likes.length}} </div>
        </li>
      </ul>
    </div>

解决方案

You could write a function to do the sorting in the controller before displaying in view. Or preferable, you could write a custom filter

Filter:

angular.module('YourAppName', [])
.filter('orderByLikes', function() {
    function compare(a, b) {
        return b.likes.length - a.likes.length;
    }
    return function (input) {
        return input.sort(compare);
    }
}); 

View:

<div ng-controller = "MyController">
  <ul>
    <li ng-repeat = "post in posts | orderByLikes:posts">
           <div> {{post.title}} </div>
           <div> {{post.content}} </div>
           <div> {{post.likes.length}} </div>
    </li>
  </ul>
</div>

Here is a working Fiddle

这篇关于在项目的后续ngrepeat财产订单项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！