Angular - ng-repeat 순서를 만들 수 없습니다.작업별

Angular - ng-repeat 순서를 만들 수 없습니다.작업별

orderBy에서 ng-repeat의 예를 여러 번 시도했지만 json을 사용할 수 없습니다.

<div ng-app>
    <script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
    <div ng:controller="Main">
        <div ng-repeat="release in releases| orderBy:'environment_id'">      
            {{release.environment_id}}
        </div>
    </div>
</div>

그리고 JSON은

function Main($scope) {
$scope.releases = {
    "tvl-c-wbap001 + tvl-webapp": {
        "timestamp": " 05:05:53 PM ",
        "environment_id": "CERT5",
        "release_header": "Projects/Dev",
        "date": "19 Oct",
        "release": "12.11.91-1"
    },
    "tvl-c-wbap401 + tvl-webapp": {
        "timestamp": " 10:07:25 AM ",
        "environment_id": "CERT4",
        "release_header": "Future Release",
        "date": "15 Oct",
        "release": "485-1"
    },
    "tvl-c-wbap301 + tvl-webapp": {
        "timestamp": " 07:59:48 AM ",
        "environment_id": "CERT3",
        "release_header": "Next Release",
        "date": "15 Oct",
        "release": "485-1"
    },
    "tvl-c-wbap201 + tvl-webapp": {
        "timestamp": " 03:34:07 AM ",
        "environment_id": "CERT2",
        "release_header": "Next Changes",
        "date": "15 Oct",
        "release": "13.12.3-1"
    },
    "tvl-c-wbap101 + tvl-webapp": {
        "timestamp": " 12:44:23 AM ",
        "environment_id": "CERT1",
        "release_header": "Production Mirror",
        "date": "15 Oct",
        "release": "13.11.309-1"
    },
    "tvl-s-wbap002 + tvl-webapp": {
        "timestamp": " 12:43:23 AM ",
        "environment_id": "Stage2",
        "date": "15 Oct",
        "release": "13.11.310-1"
    },
    "tvl-s-wbap001 + tvl-webapp": {
        "timestamp": " 11:07:38 AM ",
        "environment_id": "Stage1",
        "release_header": "Production Mirror",
        "date": "11 Oct",
        "release": "13.11.310-1"
    },
    "tvl-p-wbap001 + tvl-webapp": {
        "timestamp": " 11:39:25 PM ",
        "environment_id": "Production",
        "release_header": "Pilots",
        "date": "14 Oct",
        "release": "13.11.310-1"
    },
    "tvl-p-wbap100 + tvl-webapp": {
        "timestamp": " 03:27:53 AM ",
        "environment_id": "Production",
        "release_header": "Non Pilots",
        "date": "11 Oct",
        "release": "13.11.309-1"
    }
}

제가 뭘 쓰든 상관없습니다.항상 같은 순서가 오거나 전혀 순서가 없다고 말할 수 있습니다.

그orderBy어레이에서만 동작합니다.http://docs.angularjs.org/api/ng.filter:orderBy 를 참조해 주세요.

또한 ng-repeat에서 Arrays @ Angularjs OrderBy가 아닌 오브젝트에 사용하는 훌륭한 필터는 작동하지 않습니다.

전술한 바와 같이 어레이만 허용됩니다.다만, 간단하게 하기 위해서, https://gist.github.com/brev/3949705 에서 나타내는 파이프 기능을 통해서 오브젝트를 어레이로 동적으로 변환할 수 있습니다.

필터를 선언하고 ng-repeat에 추가합니다.

<div ng-app="myApp">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-controller="Main">
  <div ng-repeat="release in releases | object2Array | orderBy:'environment_id'">{{release.environment_id}}</div>
</div>

<script>

var app = angular.module('myApp', []).filter('object2Array', function() {
    return function(input) {
      var out = []; 
      for(i in input){
        out.push(input[i]);
      }
      return out;
    }
  })
.controller('Main',function ($scope) {
        $scope.releases = {"tvl-c-wbap001 + tvl-webapp":{"timestamp":" 05:05:53 PM ","environment_id":"CERT5","release_header":"Projects/Dev","date":"19 Oct","release":"12.11.91-1"},"tvl-c-wbap401 + tvl-webapp":{"timestamp":" 10:07:25 AM ","environment_id":"CERT4","release_header":"Future Release","date":"15 Oct","release":"485-1"},"tvl-c-wbap301 + tvl-webapp":{"timestamp":" 07:59:48 AM ","environment_id":"CERT3","release_header":"Next Release","date":"15 Oct","release":"485-1"},"tvl-c-wbap201 + tvl-webapp":{"timestamp":" 03:34:07 AM ","environment_id":"CERT2","release_header":"Next Changes","date":"15 Oct","release":"13.12.3-1"},"tvl-c-wbap101 + tvl-webapp":{"timestamp":" 12:44:23 AM ","environment_id":"CERT1","release_header":"Production Mirror","date":"15 Oct","release":"13.11.309-1"},"tvl-s-wbap002 + tvl-webapp":{"timestamp":" 12:43:23 AM ","environment_id":"Stage2","date":"15 Oct","release":"13.11.310-1"},"tvl-s-wbap001 + tvl-webapp":{"timestamp":" 11:07:38 AM ","environment_id":"Stage1","release_header":"Production Mirror","date":"11 Oct","release":"13.11.310-1"},"tvl-p-wbap001 + tvl-webapp":{"timestamp":" 11:39:25 PM ","environment_id":"Production","release_header":"Pilots","date":"14 Oct","release":"13.11.310-1"},"tvl-p-wbap100 + tvl-webapp":{"timestamp":" 03:27:53 AM ","environment_id":"Production","release_header":"Non Pilots","date":"11 Oct","release":"13.11.309-1"}}
    });
</script>

개체를 반복할 때 기본 제공 orderBy 필터가 더 이상 작동하지 않습니다.개체 필드가 저장되는 방식 때문에 무시됩니다.사용자 정의 필터를 생성해야 합니다.

yourApp.filter('orderObjectBy', 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;
  };
});

<ul>
<li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li>
</ul>

위의 Eike Ties의 응답에서는 언더스코어.js를 사용하면 필터는 다음과 같이 단순화할 수 있습니다.

var app = angular.module('myApp', []).filter('object2Array', function() {
  return function(input) {
    return _.toArray(input);
  }
});

오브젝트 키에 의한 정렬도 지원하는 @Julian Moscera 코드 버전은 다음과 같습니다.

yourApp.filter('orderObjectBy', function () {
    return function (items, field, reverse) {
        // Build array
        var filtered = [];
        for (var key in items) {
            if (field === 'key')
                filtered.push(key);
            else
                filtered.push(items[key]);
        }
        // Sort array
        filtered.sort(function (a, b) {
            if (field === 'key')
                return (a > b ? 1 : -1);
            else
                return (a[field] > b[field] ? 1 : -1);
        });
        // Reverse array
        if (reverse)
            filtered.reverse();
        return filtered;
    };
});

릴리스 개체를 개체 배열로 다시 포맷해야 합니다.그러면 당신이 시도하는 방식으로 그것들을 분류할 수 있을 거예요.

orderby는 필터로 사용할 수 있는 imidate 값을 가진 객체를 포함하는 배열에서 작동합니다.

controller.images = [{favs:1,name:"something"},{favs:0,name:"something else"}];

위의 배열이 반복되면 | orderBy:'favs'를 사용하여 해당 값을 즉시 참조하거나 앞에 마이너스(-)를 사용하여 내림차순으로 주문할 수 있습니다.

<div class="timeline-image" ng-repeat="image in controller.images | orderBy:'-favs'">
    <img ng-src="{{ images.name }}"/>
</div>

@Julian Moscera의 코드 버전은 프라이머리 필드가 null이거나 정의되지 않은 경우에 사용할 수 있는 "폴백" 필드를 지원합니다.

yourApp.filter('orderObjectBy', function() {
  return function(items, field, fallback, reverse) {
    var filtered = [];
    angular.forEach(items, function(item) {
      filtered.push(item);
    });
    filtered.sort(function (a, b) {
      var af = a[field];
      if(af === undefined || af === null) { af = a[fallback]; }

      var bf = b[field];
      if(bf === undefined || bf === null) { bf = b[fallback]; }

      return (af > bf ? 1 : -1);
    });
    if(reverse) filtered.reverse();
    return filtered;
  };
});

언급URL : https://stackoverflow.com/questions/19387552/angular-cant-make-ng-repeat-orderby-work