Question

我有以下代码：

angular.module("myApp", []).controller("myController", function ($scope) {
  $scope.myList = [
    { text: "1" },
    { text: "2" },
    { text: "3" },
    { text: "4" },
    { text: "5" },
  ];
});

.ribbon {
  display: flex;
}
.arrow {
  width: 30px;
  height: 30px;
  background-color: grey;
  color: white;
  cursor: pointer;
}
.items {
  display: flex;
  overflow: hidden;
  //width: 150px;
  border-color: 1px solid grey;
}
.item {
  border: 1px solid blue;
  width: 50px;
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="ribbon" ng-app="myApp" ng-controller="myController">
  <div class="arrow arrowLeft" ng-click="myList.push(myList.shift())">&larr;</div>
  <div class="items">
    <div class="item" ng-repeat="item in myList">{{ item.text }}</div>
  </div>
  <div class="arrow arrowRight" ng-click="myList.unshift(myList.pop())">&rarr;</div>
</div>

我有一个包含一些项目的简单列表。这个项目在一个元素中应该像一个功能区。我还有两个箭头按钮（左和右）。当我单击右边时，整个色带向右移动（以圆圈形式），因此当第5个项目是最后一个时，它会弹出op作为第一个，第一个移动到第二个等等。我的目标是在第一个中移动色带但它应该是另一种方式。当我点击右箭头时，它应该向左移动（所以第一个项目现在是最后一个等）。当我点击左边时，它应该向右移动（最后是现在第一个等）。我怎样才能做到这一点？我试图切换ng-click，但它似乎工作。有什么想法吗？

干杯

Answer 1

我找到了解决方案

切换到ng-click工作，我只是看错了 - 抱歉！

但仍然感谢和欢呼。

在这里：

＆＃13;

angular.module("myApp", []).controller("myController", function ($scope) {
  $scope.myList = [
    { text: "1" },
    { text: "2" },
    { text: "3" },
    { text: "4" },
    { text: "5" },
  ];
});

＆＃13;

.ribbon {
  display: flex;
}
.arrow {
  width: 30px;
  height: 30px;
  background-color: grey;
  color: white;
  cursor: pointer;
}
.items {
  display: flex;
  overflow: hidden;
  //width: 150px;
  border-color: 1px solid grey;
}
.item {
  border: 1px solid blue;
  width: 50px;
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="ribbon" ng-app="myApp" ng-controller="myController">
  <div class="arrow arrowLeft" ng-click="myList.push(myList.shift())">&larr;</div>
  <div class="items">
    <div class="item" ng-repeat="item in myList">{{ item.text }}</div>
  </div>
  <div class="arrow arrowRight" ng-click="myList.unshift(myList.pop())">&rarr;</div>
</div>

＆＃13;

使用push / shift和unshift / pop

1 个答案: