Question

问题很简单...... 我有一系列电影div（图像和desc）用简单的ng-repeat编写... 现在，当我选择其中一个时，我想做以下事情（我猜想的一个位置游戏）：

1）我想从数组中取出该元素并使用平滑动画将其放大到屏幕中的其他位置，而不会破坏该数组的顺序。

2）当我选择另一部电影时，我希望我之前选择的那部电影能够回到原来的位置，按照我新选择的电影拍摄之前的电影空间：

这是我创建的一个简单的练习页面，所以有人可以挖掘更多： http://single.org.il/

（只需按下其中一个类别，页面底部就会出现一个电影列表，中间的黑色屏幕是我希望我选择的电影进入的地方，它已经准备好了发生了，但它打破了很多）

非常感谢！

Answer 1

我建议将选择状态作为数据模型的一部分，然后根据选择数据绑定视图。重点是：

跟踪所选项目作为$ scope的一部分，选择状态作为项目数据的一部分
从导航列表中筛选所选项目
将详细信息视图绑定到所选项目

我创建了一个简单的jsfiddle来演示概念http://jsfiddle.net/ZLvQD/1/。关键代码点包括过滤后的导航列表：

<div ng-controller="ListController">
  <ul>
    <li ng-repeat="item in itemList | filter:{isSelected:false}" 
      ng-class="{selected: item.isSelected}" ng-click="select(item)">
      {{item.desc}}</li>
  </ul>
  <div ng-hide="!selectedItem">
    <hr/>
    The selected item is:
    <p class="selected">{{selectedItem.desc}}</p>
  </div>

包括选择状态的数据模型：

$scope.itemList = [
    {
        "desc": "Item A",
        "isSelected": false
    },
...

和控制器跟踪选择状态：

$scope.selectedItem = null;
$scope.select = function(selectedItem) {
    // Deselect existing
    if ($scope.selectedItem) {
        $scope.selectedItem.isSelected = false;
    }
    // Select new
    selectedItem.isSelected = true;
    $scope.selectedItem = selectedItem;
};

我担心我对动画部分一无所知。

使用jquery / angular将元素从一个位置移动到另一个位置

1 个答案: