ng-repeat과 ng-animate를 사용하여 목록을 정렬하려면 어떻게 해야 합니까?

ng-repeat과 ng-animate를 사용하여 목록을 정렬하려면 어떻게 해야 합니까?

다음을 사용하여 개체 목록을 렌더링합니다.ng-repeat와 함께orderBy다음과 같이 필터링합니다.

<li class="list-item" ng-repeat="item in items | orderBy:predicate:reverse">

목록 정렬의 변경을 ng-animate로 하려는 나의 시도는 좌절감을 주고 공유할 가치가 없는 것으로 판명되었다.나는 여기서 Yearofmoo 예제 앱을 본 적이 있다.

유감스럽게도 이 시연은 제가 달성하려는 것이 아닙니다.리스트 아이템이 새로운 순서로 배치될 때 리스트 아이템의 X 위치에 애니메이션을 적용해야 합니다.orderBy정의가 변경됩니다.css의 이행과 절대적인 포지셔닝으로 이를 실현하려고 노력했지만,ng-repeat목록 항목을 재작성하는 것 같습니다.orderBy애니메이션을 정말 어렵게 만들고 있습니다.

1. 이게 가능합니까?ng-repeat | orderBy(유무에 관계없이)ng-animate)?
2. 접근방식을 제안하거나 예를 제시해 주시겠습니까?

그래서 @Alex Osborn이 댓글로 원하는 것을 할 수 있는 방법을 보여줬다고 해도, 제 시도는 다음과 같습니다.

angular.module('StackApp', []).controller('MainCtrl', function($scope) {
  'use strict';

  $scope.reverse = 'false';

  $scope.myList = [{
    id: 0,
    text: 'HTML5 Boilerplate'
  }, {
    id: 1,
    text: 'AngularJS'
  }, {
    id: 2,
    text: 'Karma'
  }, {
    id: 3,
    text: 'Hello'
  }, {
    id: 4,
    text: 'World'
  }, {
    id: 5,
    text: 'How'
  }, {
    id: 6,
    text: 'Are'
  }, {
    id: 7,
    text: 'You'
  }, {
    id: 8,
    text: '?'
  }, {
    id: 9,
    text: 'I'
  }, {
    id: 10,
    text: 'write'
  }, {
    id: 11,
    text: 'more'
  }, {
    id: 12,
    text: 'to'
  }, {
    id: 13,
    text: 'make'
  }, {
    id: 14,
    text: 'the'
  }, {
    id: 15,
    text: 'list'
  }, {
    id: 16,
    text: 'longer'
  }];

  $scope.$watch('reverse', function() {
    $scope.setOrder();
  });

  $scope.setOrder = function() {

    if ($scope.reverse === 'random') {

      var t = [];

      for (var i = 0; i < $scope.myList.length; i++) {
        var r = Math.floor(Math.random() * $scope.myList.length);
        while (inArray(t, r)) {
          r = Math.floor(Math.random() * $scope.myList.length);
        }
        t.push(r);
        $scope.myList[i].order = r;
      }

    } else {

      for (var i = 0; i < $scope.myList.length; i++) {
        if ($scope.reverse === 'false') {
          $scope.myList[i].order = i;
        } else {
          $scope.myList[i].order = ($scope.myList.length - 1 - i);
        }
      }
    }
  };

  function inArray(a, value) {
    for (var i = 0; i < a.length; i++) {
      if (a[i] === value) {
        return true;
      }
    }
    return false;
  }

});

#list {
  /* Needed, otherwise items would be at top of the page (see below) */
  position: absolute;
  /* full width, or it would look strange */
  width: 100%;
}
#list li {
  position: absolute;
  /* Top: 0; this will be changed for every single list item by AngularJS */
  top: 0;
  /* Item height; hold this in sync with template file */
  height: 40px;
  /*  Simple transition */
  -webkit-transition: top 0.5s ease-in-out;
  -moz-transition: top 0.5s ease-in-out;
  transition: top 0.5s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="StackApp">
  <div ng-controller="MainCtrl">
    <h1>Animate Order</h1>
    <form action="">
      <label for="reverse">reverse = true</label>
      <br>
      <input type="radio" value="true" name="reverse" ng-model="reverse">
      <br>
      <br>
      <label for="reverse">reverse = false</label>
      <br>
      <input type="radio" value="false" name="reverse" ng-model="reverse">
      <br>
      <br>
      <label for="reverse">reverse = random (click button below to shuffle again)</label>
      <br>
      <input type="radio" value="random" name="reverse" ng-model="reverse">
    </form>
    <br>
    <br>
    <input type="button" ng-click="reverse = 'random';setOrder()" value="setOrder()">
    <br>
    <br>
    <ul id="list" ng-style="{height: ((myList.length * 40) + 'px')}">
      <li ng-repeat="item in myList" ng-style="{top: ((item.order * 40) + 'px')}">{{$index}} - {{item.order}}. {{item.text}}</li>
    </ul>
  </div>
</div>

그래서 앵귤러JS는 항목을 정렬하지 않지만 CSS 속성을 변경합니다.top(ng-style="{top: ...}") 각진JS는 목록을 다시 만들지 않고 멋진 애니메이션을 얻을 수 있습니다.:)

AndreM96의 답변에 따라 목록을 그리드로 표시할 수 있도록 확장했습니다.

angular.module('StackApp', []).config(function($routeProvider) {

  'use strict';

  $routeProvider
    .when('/', {
      template: '<h1>Animate Order</h1>' +
        '<form action="">' +
        '<input type="radio" value="true" name="order" ng-model="order">' +
        '<label for="order">reverse</label><br><br>' +

        '<input type="radio" value="false" name="order" ng-model="order">' +
        '<label for="order">normal</label><br><br>' +

        '<input type="radio" value="random" name="order" ng-model="order">' +
        '<label for="order">random (click button below to shuffle again)</label><br>' +

        '</form>' +
        '<input type="button" ng-click="order = \'random\';setOrder()" value="randomize">' +
        '<br><br>' +
        '<ul id="list" ng-style="{height: ((myList.length * 90) + \'px\')}">' +
        '<li ng-repeat="item in myList" ng-style="{top: ((item.row * 90) + \'px\'), left: ((item.column * 90) + \'px\')}">{{$index}} - {{item.order}}. {{item.text}}</li>' +
        '</ul>',
      controller: 'MainCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });

});

angular.module('StackApp').controller('MainCtrl', function($scope) {
  'use strict';

  $scope.order = 'false';

  $scope.myList = [{
      id: 0,
      text: 'HTML5 Boilerplate'
    },
    {
      id: 1,
      text: 'AngularJS'
    },
    {
      id: 2,
      text: 'Karma'
    },
    {
      id: 3,
      text: 'Hello'
    },
    {
      id: 4,
      text: 'World'
    },
    {
      id: 5,
      text: 'How'
    },
    {
      id: 6,
      text: 'Are'
    },
    {
      id: 7,
      text: 'You'
    },
    {
      id: 8,
      text: '?'
    },
    {
      id: 9,
      text: 'I'
    },
    {
      id: 10,
      text: 'write'
    },
    {
      id: 11,
      text: 'more'
    },
    {
      id: 12,
      text: 'to'
    },
    {
      id: 13,
      text: 'make'
    },
    {
      id: 14,
      text: 'the'
    },
    {
      id: 15,
      text: 'list'
    },
    {
      id: 16,
      text: 'longer'
    }
  ];

  $scope.$watch('order', function() {
    $scope.setOrder();
  });

  $scope.setOrder = function() {

    var i;

    if ($scope.order === 'random') {
      var t = [];
      for (i = 0; i < $scope.myList.length; i++) {
        var r = Math.floor(Math.random() * $scope.myList.length);
        while (inArray(t, r)) {
          r = Math.floor(Math.random() * $scope.myList.length);
        }
        t.push(r);
        $scope.myList[i].order = r;
      }
    } else if ($scope.order === 'false') {
      for (i = 0; i < $scope.myList.length; i++) {
        $scope.myList[i].order = i;
      }
    } else {
      for (i = 0; i < $scope.myList.length; i++) {
        $scope.myList[i].order = ($scope.myList.length - 1 - i);
      }
    }

    calcGridPosition();
  };

  function inArray(a, value) {
    for (var i = 0; i < a.length; i++) {
      if (a[i] === value) {
        return true;
      }
    }
    return false;
  }

  function calcGridPosition() {
    for (var i = 0; i < $scope.myList.length; i++) {
      var item = $scope.myList[i];

      // columns, left-to-right, top-to-bottom
      var columns = 5;
      item.column = item.order % columns;
      item.row = Math.floor(item.order / columns);

      // rows, top-to-bottom, left-to-right
      // var rows = 3;
      // item.column = Math.floor(item.order/rows);
      // item.row = item.order%rows;
    }
  }

});

#list {
  position: absolute;
  width: 100%;
  list-style-type: none;
  padding-left: 0;
}

#list li {
  position: absolute;
  height: 70px;
  width: 70px;
  background: #ddd;
  -webkit-transition: all 2.5s ease-in-out;
  -moz-transition: all 2.5s ease-in-out;
  transition: all 2.5s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<main ng-app="StackApp">
  <div class="container" ng-view></div>
</main>

JSBin 데모

언급URL : https://stackoverflow.com/questions/16431136/how-can-i-animate-sorting-a-list-with-orderby-using-ng-repeat-with-ng-animate