移动 ng-repeat 的所有 child 并显示新的

Question

你好，我需要创建动画，它将 ng-repeat 指令显示的所有项目移动到左侧，隐藏第一个并显示新元素代替最后一个。

元素由控制器中 JSON object 的 ng-repeat 指令显示。

<div class="element" ng-repeat="n in elements | limitTo: 4">
  {{n.title}}
</div>

它被限制为 4 个元素，尽管它在 JSON object 内部控制器中有 5 个元素：

$scope.elements = [
  {
    id: 1,
    title: 'title1'
  },
  {
    id: 2,
    title: 'title2'
  },
  {
    id: 3,
    title: 'title3'
  },
  {
    id: 4,
    title: 'title4'
  },
  {
    id: 5,
    title: 'title5'
  }
]

简而言之：单击所有元素右侧的 > 符号后，我想隐藏第一个，将所有元素移到左侧并在右侧显示新元素。

如何操作？这是我正在研究的 plunker，你们可以使用它： https://plnkr.co/edit/dmmrNMaBno3KZMqL8E6O?p=preview

Answer 1

好吧，首先你可以使用一些外部插件来让你的生活更轻松，但如果你想拥有自己的解决方案，我试过并在没有 jQuery 的情况下实现了它。大多数魔法在 CSS 中，有些在 javascript 中。此外，我已将所有内容都放在指令中，因为所有 DOM 操作都应在指令中完成。你当然可以稍微改进一下：

script.js

var app = angular.module("app", []);
app.controller("mainCtrl", function($scope) {

});
app.directive('elements', function() {
  return {
    restrict: 'E',
    templateUrl: 'element.html',
    link: function($scope, $element, $attrs) {
      $scope.elements = [{
        id: 1,
        title: 'title1'
      }, {
        id: 2,
        title: 'title2'
      }, {
        id: 3,
        title: 'title3'
      }, {
        id: 4,
        title: 'title4'
      }, {
        id: 5,
        title: 'title5'
      }, {
        id: 6,
        title: 'title6'
      },{
        id: 7,
        title: 'title7'
      }, {
        id: 8,
        title: 'title8'
      }, {
        id: 9,
        title: 'title9'
      }, {
        id: 10,
        title: 'title10'
      }, {
        id: 11,
        title: 'title11'
      }, {
        id: 12,
        title: 'title12'
      }]

      let elementPos = 0;

      $scope.moveSlide = () => {
        elementPos+=4;
        document.querySelectorAll(".element").forEach(elem => {
          let element = angular.element(elem);
          if (elementPos>=$scope.elements.length){
            document.querySelectorAll(".element").forEach(elem => angular.element(elem).css('margin-left', '15px'));
            elementPos=0;
            return;
          }else if (elementPos >= element.attr('order')){
            element.css('margin-left', '-100px');  
          }
        });

      }
    }
  }
});

element.html

<div class="left-arrow"> &lt; </div>
<div class="container">
  <div class="element-container" style="width:{{elements.length*115}}px">
    <div class="element" order="{{$index+1}}" ng-repeat="n in elements">
      {{n.title}}
    </div>
  </div>
</div>
<div class="right-arrow" ng-click="moveSlide()"> &gt; </div>

index.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app" >
  <h1>Hello Plunker!</h1>
  <elements></elements>


</body>

</html>

style.css

.element {
  width: 100px;
  height: 100px;
  background: orange;
  margin-left: 15px;
  display: inline-block;
  transition: 1s all;
}

.container {
  display: inline-block;
  padding: 10px 0;
  height: 100px;
  width: 475px;
  background: #dfdfdf;
  overflow: hidden;
}

.left-arrow {
  height: 20px;
  display: inline-block;
  position: relative;
  width: 20px;
  cursor:pointer;
  top:-50px;
}

.right-arrow {
  height: 20px;
  display: inline-block;
  position: relative;
  width: 20px;
  cursor:pointer;
  top:-50px;
}

移动 ng-repeat 的所有 child 并显示新的

Move all child of ng-repeat and show new

javascript

animation

angularjs

angularjs-ng-repeat