如何使用angularjs使用向上和向下按钮将div垂直对齐

Mary 发表于 Dev

玛丽

我有3 div的位置在CSS中是绝对的。我现在要使它们垂直。还有一个向上和向下按钮。当我单击向上按钮时，div应该向上（交换div），而当我单击向下按钮（swap div）时，它应该向下。我喜欢用动画来做，但是没有运气。正如您在我的示例中看到的那样，我仅使用swap A and C position按钮进行交换，但这是错误的。我需要使用每个div内部的向上和向下按钮交换它们。

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

app.controller('myCtrl', function($scope, $timeout) {
  var arr = $scope.arr = [{
    val: 0,
    id: 'a',
    xpos: 0
  }, {
    val: 1,
    id: 'b',
    xpos: 1
  }, {
    val: 2,
    id: 'c',
    xpos: 2
  }];


  $scope.getAbsPos = function(index) {
    console.log(index);
    return {
      left: index * 100 + 'px'
    };
  }

  $scope.swap = function() {
    var a = arr[0];
    var c = arr[1];

    //reorder the array first, since xpos did not change, no animation will be triggered
    arr[0] = c;
    arr[1] = a;

    //update the xpos value in async, which will trigger an animation

    $timeout(function() {
      var tempX = a.xpos;
      a.xpos = c.xpos;
      c.xpos = tempX;

    }, 1)

  }

})

.item {
  border: 1px solid;
  width: 80px;
  height: 120px;
  position: absolute;
  -webkit-transition: all 1000ms;
  transition: all 1000ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="ngApp">

  <div ng-controller="myCtrl">
    <div class="item" ng-repeat="item in arr track by item.id" ng-style="getAbsPos(item.xpos)">{{item.id}} / {{$index}}
      <button ng-click="up()">Move Up</button>
      <button ng-click="down()">Move Down</button>



    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <div>{{arr}}</div>

    <button style="margin-top:200px" ng-click="swap()">swap A and C position</button>

  </div>

我想要实现的输出是：请帮助我

ZenDD

Aite，这是您要寻找的工作解决方案。要启用动画，请不要忘记将其包含angular-animate.js在索引页面中。

HTML：

<div class="cont" ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="item in items" ng-class="item.class" id="{{item.id}}">
        <h2>{{item.name}}</h2>
        <button id="left" ng-click="moveUp(item.track)">Up</button>
        <button id="right" ng-click="moveDown(item.track)">Down</button>
    </div>
</div>

CSS：

div.cont {position: relative;}
div.first, div.second, div.third {
    position: absolute;
    width: 90%;
    height: 100px;
    left: 50px;
    /*A bit of animation:*/
    -moz-transition: 0.4s ease all;
    transition: 0.4s ease all;
}
div.first {top:0;}
div.second {top:120px;}
div.third {top:240px;}
#left {float: left;}
#right {float: right;}
h2 {text-align: center;}
#a {background-color: lightblue;}
#b {background-color: lightpink;}
#c {background-color: lightyellow;}

角度：

angular.module('myApp', ["ngAnimate"])
.controller('myCtrl', ['$scope', function($scope) {
  $scope.items = [
    {class: "first", track: 0, name: "first", id: "a"},
    {class: "second", track: 1, name: "second", , id: "b"},
    {class: "third", track: 2, name: "third", , id: "c"}
  ];

  $scope.moveUp = function(track){
    //When div is in the top - return;
    if(track == 0) return;

    //Define variables for upper and lower divs:
    var divUp;
    var divDown;

    //Find and assign values to the variables above:
    for(var i = 0; i<$scope.items.length; i++){
      if($scope.items[i].track == track) divUp = $scope.items[i]; 
      if($scope.items[i].track == track-1) divDown = $scope.items[i]; 
    }

    //Save class and track values of the element that goes up:
    var classUp = divUp.class;
    var trackUp = divUp.track;

    //Swap class and track values between lower and upper divs:
    divUp.class = divDown.class;
    divDown.class = classUp;
    divUp.track = divDown.track;
    divDown.track = trackUp;
  }

  $scope.moveDown = function(track){
    //When div is in the bottom - return;
    if(track == 2) return;

    //Define variables for upper and lower divs:
    var divUp;
    var divDown;

    //Find and assign values to the variables above:
    for(var i = 0; i<$scope.items.length; i++){
      if($scope.items[i].track == track) divDown = $scope.items[i]; 
      if($scope.items[i].track == track+1) divUp = $scope.items[i]; 
    }

    //Save class and track values of the element that goes up:
    var classUp = divUp.class;
    var trackUp = divUp.track;

    //Swap class and track values between lower and upper divs:
    divUp.class = divDown.class;
    divDown.class = classUp;
    divUp.track = divDown.track;
    divDown.track = trackUp;
  }
}]);