programing

ng-repeat에서 Angularjs OrderBy가 작동하지 않음

goodsources 2023. 3. 2. 22:13
반응형

ng-repeat에서 Angularjs OrderBy가 작동하지 않음

Angular를 사용하려고 합니다.JS는 제 첫 프로젝트(토너먼트 매니저)와orderBy에 여과하다.ng-repeat가 동작하지 않는다:(그 것에 관한 모든 문서를 읽었지만, 아무것도 할 수 없다:/

그래서, 내가 정의해놓은 대표팀이$scope다음과 같이 합니다.

$scope.order_item = "count_win";
$scope.order_reverse = false;
$scope.teams = {
  100 : {
    id: 100,
    name: "XXX",
    count_win: 1,
    count_loose: 2,
    goal_average: 1,
  },
  200 : {
    id: 200,
    name: "XXX",
    count_win: 1,
    count_loose: 2,
    goal_average: 1,
  },
  [...]
};

제가 보기에는 (처음에는 한 가지 주문만 가지고) 재주문하려고 하는데, 잘 되지 않습니다.

<tr ng-repeat="team in teams | orderBy:order_item:order_reverse">
   <td>{{team.name}}</td>
   <td>{{team.count_loose}}</td>
   <td>{{team.goal_average}}</td>
</tr>

두 번째, 2개의 정보에서 재주문하고 싶습니다.count_win그리고.goal_average첫 번째가 같다면..대체하려고 합니다.$scope.order_item그렇게요, 하지만 하나라도 코드가 작동하지 않으면, 그는 절대 2번과 일하지 않을 거예요...

$scope.order_item = ['count_win','goal_average'];

읽어주셔서 감사합니다.게시 사이즈에 대해 사과드립니다.

$scope.teams어레이가 아닙니다(객체의 객체입니다).orderBy필터는 어레이에서만 작동합니다.당신이 만든다면$scope.teams어레이는 동작합니다.

$scope.teams = [
    {
      id: 100,
      name: "team1",
      count_win: 3,
      count_loose: 2,
      goal_average: 2,
    },
    {
      id: 200,
      name: "team2",
      count_win: 3,
      count_loose: 2,
      goal_average: 1,
    },        
    {
      id: 300,
      name: "team3",
      count_win: 1,
      count_loose: 2,
      goal_average: 1,
     }
];

또는 오브젝트에 대해 다음과 같은 특수한 필터를 추가할 수 있습니다(여기에서 차용).

app.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;
  };
});

그리고 이렇게 사용하세요.

<tr ng-repeat="team in teams | orderObjectBy:order_item:order_reverse">

이 커스텀 필터는 질문의 두 번째 부분과 같이 정렬 순서 배열에서는 작동하지 않습니다.

주문의 범위 파라미터를 작성할 필요가 없습니다.배열을 취급하고 있는 경우는 마크업으로 직접 작성할 수 있습니다.

<tr ng-repeat="team in teams | orderBy:count_win:false">

두 개의 매개 변수를 사용하여

<tr ng-repeat="team in teams | orderBy:['count_win','goal_average']">

좀 더 복잡한 주문 후에 다음과 같은 함수를 스코프에 만들 수 있습니다.

$scope.customOrder = function (team) {
    //custom
}

그냥 이렇게 부르면 돼

<tr ng-repeat="team in teams | orderBy:customOrder">

@Jerrad가 말했듯이ng-repeat는 어레이에서만 동작하기 때문에 팀 오브젝트를 어레이로 변환하여 올바르게 동작시킬 필요가 있습니다.

ng-repeat은 어레이에서만 동작하며 JSON 개체에서는 동작하지 않습니다.이는 이미 여기에서 설명되었습니다.각 - ng-repeat 순서를 작성할 수 없습니다.작업별

JSON 개체를 배열로 변경하거나 즉시 변환해야 합니다.컨트롤러는 다음과 같이 됩니다.

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

app.controller('Ctrl', function ($scope) {

    $scope.teams = [
        {
            id: 100,
            name: "A Team",
            count_win: 1,
            count_loose: 2,
            goal_average: 1
        },
        {
            id: 200,
            name: "C Team",
            count_win: 2,
            count_loose: 3,
            goal_average: 4
        },
        {
            id: 300,
            name: "B Team",
            count_win: 4,
            count_loose: 1,
            goal_average: 8
        }
    ];
    $scope.predicate = 'name';
});

당신의 데이터가 담긴 데모를 가지고 바이올린을 만들었습니다.

http://jsfiddle.net/c3VVL/

언급URL : https://stackoverflow.com/questions/23920028/angularjs-orderby-on-ng-repeat-doesnt-work

반응형