Блог

Ну, проблема довольно проста… У меня есть массив фильмов div (image и desc), написанных с помощью простого ng-повтора… Теперь, когда я выбираю один из них, я хочу сделать следующее (полагаю, игра позиций):

1) Я хочу вынуть этот элемент из массива и с плавной анимацией увеличить его в какое-либо другое место на экране, не нарушая порядок этого массива.

2) когда я выбираю другой фильм, я хочу, чтобы тот, который я выбрал раньше, возвращался туда, где он был, следуя за моим недавно выбранным фильмом, чтобы занять место перед ним:

вот простая практическая страница, которую я создал, чтобы кто-то мог разобраться в ней больше: http://single.org.il /

(просто нажмите на одну из категорий вверху, список фильмов появится внизу страницы, черный экран посередине — это то место, где я хочу, чтобы мой выбранный фильм вошел, это уже происходит, но часто ломается)

Большое вам спасибо!

Я рекомендую включить состояние выбора как часть модели данных, а затем привязать представление на основе данных выбора. Важными моментами являются:

• Отслеживание выбранного элемента как части области видимости $ и состояния выбора как части данных элемента
• Отфильтруйте выбранные элементы из списка навигации
• Привязать подробный вид к выбранному элементу

Я создал упрощенный 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;
};
 

Боюсь, я ничего не знаю о части анимации.