Question

我对AngularJs相对较新，我在使用OrderBy时遇到了一个问题：关于排序对象，所以我借了一个自定义过滤器来排序对象，但我不明白正确的语法是什么正确使用这个过滤器，因为它不要按我想要的对象中的Key排序：

js：

<tbody ng-repeat="(field, profile) in currentSample.dsProfile | orderByObject:'profile[display-name]' track by $index">
            <tr ng-style="$index % 2 === 0 && {'background-color': '#ffffff'} ||
                          $index % 2 === 1 && {'background-color': '#f9f9f9'}">
                <td style="width: 19%; margin: 2px; padding: 0px;"
                    ng-style="profile['shown-in-details'] == true && {'background-color': 'gold'} ||
                              profile['shown-in-details'] == false && {'background-color': 'transparent'}">
                    <span class="btn-property"
                          ng-click="showInGenericDetails(currentSample, field)"
                          uib-tooltip="{{field}}"
                          tooltip-placement="right">
                        <b>{{profile["display-name"]}}</b>
                    </span>

JSON

过滤

app.filter('orderByObject', function() {
                return function(items, field, reverse) {
                    var filtered = [];
                    angular.forEach(items, function(item) {
                        filtered.push(item);
                    });
                    filtered.sort(function (a, b) {
                        return (a[field] > b[field] ? 1 : -1);
                    });
                    if(reverse) filtered.reverse();
                    return filtered;
                };
            });

没有过滤器

<table id="data-sources-table" class="table drag-drop">
                            <tbody ng-repeat="(field, profile) in currentSchema.sProfile | orderBy:PROPERTY track by $index">
                            <tr ng-style="$index %2 === 0 && {'background-color': '#ffffff'} ||
                                              $index %2 === 1 && {'background-color': '#f9f9f9'}">
                                <td style="width: 180px">
                                        <span class="btn-property">
                                            <b>{{field}}</b>

Answer 1

由于您无法直接使用orderBy，因为此check_call(["sh","/home/desktop/bash2pyTest/test.sh", a], shell=False)需要过滤集合，您应该将您的项目解析到集合中，如下所示：

filter

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope) {
  var testObj = {  
     "obj1":{  
        "id":1,
        "title":"Title1"
     },
     "obj2":{  
        "id":2,
        "title":"Title2"
     },
     "obj3":{  
        "id":3,
        "title":"Title3"
     }
  }; 

  $scope.testArray = [];
  Object.keys(testObj).forEach(function(key) {
    $scope.testArray.push(testObj[key]);
  });
  // Now you can use $scope.testArray as a normal array in your view.
});

注意：这样做，您只需要将对象解析一次，而不是每次需要排序时都这样做。

参考：https://docs.angularjs.org/error/orderBy/notarray

我希望它有所帮助！

修改

我注意到你正在使用这种结构：

<!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> </head> <body ng-controller="mainCtrl"> <ul> <li ng-repeat="obj in testArray | orderBy: title: reverse" ng-bind="obj.title"></li> </ul> <button type="button" ng-model="reverse" ng-click="reverse = !reverse">Reverse order</button> </body> </html>

您只需使用原生special-properties即可简化您的生活，然后就可以拥有以下内容：

ng-style="$index % 2 === 0 && {'background-color': '#ffffff'} || $index % 2 === 1 && {'background-color': '#f9f9f9'}"

注意：将ng-repeat更改为ng-style="$even && {'background-color': '#ffffff'} || $odd && {'background-color': '#f9f9f9'}"标记。

在AngularJs中使用自定义过滤器

1 个答案: