AngularJS:如何编写升序排序过滤器

AngularJS:如何编写升序排序过滤器,第1张

我正在学习AngularJS并尝试编写升序排序过滤器:

这是我的html文件:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="../Scripts/angular.min.js"></script>
  <script src="../Scripts/Controllers/app.js"></script> 
</head>
<body ng-app="myApp">
    <ul ng-init="names = ['Peter','Anton','John']">
       <li ng-repeat="name in names | sortAscending ">
           <span>{{name}}</span>
       </li>
   </ul>
</body>
</html>

这是我的过滤器:

app.filter("sortAscending", function () {
    return function (input) {
        var result = [];
        for (var i = 0; i < input.length; i  ) {
            if (input[i] > input[i   1]) {
                result.push(input[i]);
            }
        }

        return result;
    }
});

关于比较值,循环中出现了问题。

我做错了什么?

最佳答案:

2 个答案:

答案 0 :(得分:3)

三件事:

  1. 您的过滤器没有返回任何内容(缺少退货声明)

  2. ng-init只应用于别名,在其中声明变量不是一个好习惯。在您的示例中,您应该使用ng-init将过滤器应用于您的数组,但是数组本身应该在控制器中声明。

  3. 您的排序算法不起作用。要对这样的简单数组进行排序,只需使用javascript sort()方法即可。

  4. 这是一个工作的傻瓜,纠正了三点:

    http://plnkr.co/edit/Qv9TDonFmpJsnIjx3dff?p=preview

     <ul  ng-init="sorted_names = (names | sortAscending)">
           <li ng-repeat="name in sorted_names ">
               <span>{{name}}</span>
          </li>
     </ul>
    

    编辑:我想你想把它理解为一种练习形式,所以我的解决方案只针对你试图解决问题的方式。像其他提到的那样,你可以使用orderby过滤器来使这更容易。

    答案 1 :(得分:2)

    orderBy怎么样:

    <ul ng-init="names = [{name:'Peter'}, {name:'Anton'}, {name: 'John'}]">
        <li ng-repeat="name in names | orderBy:' name' ">
            <span>{{name}}</span>
        </li>
    </ul>
    

    使用 符号加上前缀表示升序,或者 - 表示降序。

    参考:orderBy

    编辑:正如另一个答案所示,请不要使用ng-init来声明变量/对象。正如你在AngularJS文档中看到的那样,可以使用一个简单的控制器,不仅用于大多数目的,更重要的是用于练习目的。

    本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复