Question

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

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

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

它仅限于4个元素，尽管它在控制器内的JSON对象中有5个元素：

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

简而言之：点击我要隐藏的所有元素右侧的＆gt; 符号后，向左移动所有元素并在右侧显示新元素。

怎么做？这是我正在研究的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的所有孩子并显示新的

1 个答案: