当前位置: 首页 > 面试题库 >

AngularJS按属性排序

弓磊
2023-03-14
问题内容

我正在尝试按属性对一些数据进行排序。这是我tought应该可以工作的示例,但事实并非如此。

HTML部分:

<div ng-app='myApp'>
    <div ng-controller="controller">
    <ul>
        <li ng-repeat="(key, value) in testData | orderBy:'value.order'">
            {{value.order}}. {{key}} -> {{value.name}}
        </li>
    </ul>
    </div>
</div>

JS部分:

var myApp = angular.module('myApp', []);

myApp.controller('controller', ['$scope', function ($scope) {

    $scope.testData = {
        C: {name:"CData", order: 1},
        B: {name:"BData", order: 2},
        A: {name:"AData", order: 3},
    }

}]);

结果:

  1. A-> AData
  2. B-> BData
  3. C-> C数据

…恕我直言,应如下所示:

  1. C-> C数据
  2. B-> BData
  3. A-> AData

我是否错过了某些东西(可以在这里进行JSFiddle的实验)?


问题答案:

AngularJS的orderBy过滤器仅支持数组-没有对象。因此,您必须编写自己的小型过滤器,该过滤器会为您进行排序。

或更改处理数据的格式(如果您对此有影响)。包含对象的数组可通过本机orderBy过滤器排序。

这是我的AngularJS的 orderObjectBy 过滤器:

app.filter('orderObjectBy', function(){
 return function(input, attribute) {
    if (!angular.isObject(input)) return input;

    var array = [];
    for(var objectKey in input) {
        array.push(input[objectKey]);
    }

    array.sort(function(a, b){
        a = parseInt(a[attribute]);
        b = parseInt(b[attribute]);
        return a - b;
    });
    return array;
 }
});

您认为的用法:

<div class="item" ng-repeat="item in items | orderObjectBy:'position'">
    //...
</div>

在此示例中,对象需要一个position属性,但是您可以灵活地在对象中使用任何属性(包含整数),只需按照视图中的定义即可。

JSON示例:

{
    "123": {"name": "Test B", "position": "2"},
    "456": {"name": "Test A", "position": "1"}
}

这是一个小提琴,向您显示用法:http :
//jsfiddlehtml" target="_blank">.net/4tkj8/1/



 类似资料:
  • 问题内容: 我现在只需获取数组的前3个对象并映射它们: 每个都有一个属性(champ.level)。 如何将输出分类到 前三个切片中? 问题答案: 与自定义比较功能一起使用时,首先要进行降序排序: 使用ES6甚至更好:

  • 哦,那些狡猾的Java8条带有lambdas的溪流。它们非常强大,但是复杂的东西需要一点时间来包裹它。 假设我有一个类型,其属性为。假设我有这些用户的地图 ?

  • 我有一些对象的列表。我想先按一些属性和空值排序,比如在查询中: 我知道当我有字符串列表时,我可以这样做: 但是当我有一些类的对象列表时呢? 有什么建议我可以用java实现吗?

  • 问题内容: 哦,那些带有lambda的棘手的Java 8流。它们非常强大,但是复杂性要花一点点头才能将其包起来。 假设我有一个带有属性的类型。假设我有一个与名称相关联的用户的地图(例如,登录用户名)。让我们进一步说一下,我有一个比较器的实例来对用户名进行排序(也许使用花哨的排序器等)。 那么,如何获取地图中按用户名排序的用户列表?我可以忽略地图键并执行以下操作: 但是我不得不提取名称才能使用的那一

  • 问题内容: 我想按属性排序。这是我的代码… 现在我想按属性将其排序,例如在另一个活动中。但是我不知道该怎么做。有人知道吗? 问题答案: 您需要实现,例如: 然后像这样排序:

  • 我有一个实体如下 使用Spring Data Rest(Gosling Release Train),我可以指定 用于对名称进行升序排序。现在,我需要按numberOfHands降序和name升序排序。我可以指定 谢谢!