我怎样才能动画排序使用NG重复与NG-动画与排序依据列表？ [英] How can I animate sorting a list with orderBy using ng-repeat with ng-animate?

查看：139
本文介绍了我怎样才能动画排序使用NG重复与NG-动画与排序依据列表？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用的渲染对象的列表 NG-重复与排序依据过滤这样的：

＆LT;李班=列表项NG重复=项中的项目|排序依据：predicate：反转＆GT;

我尝试在列表中的排序，以NG-动画的变化已经证明令人沮丧，不值得分享。我在这里看到Yearofmoo示例应用程序。

不幸的是这个演示是不是很我想要实现的。我需要动画一个给定的列表项的X位置时，它被放置在一个新的秩序排序依据定义更改后。我曾尝试与CSS过渡和绝对定位来实现这一点，但 NG-重复似乎重新创建排序依据动画制作一​​个真正的挑战。


  1. 这可能与 NG-重复|排序依据（有或无
    NG-动画）？

  2. 您能否提供一种方法，或者提供一个例子吗？


解决方案

所以，即使@Alex奥斯本已经显示出一种方法，你在评论中想要的东西，这是我的尝试：

首先，活生生的例子： http://jsbin.com/exevom/1/ （只适用于非编辑模式）

code：

模板文件

 ＆LT; H1＆GT;动画订单和LT; / H1＆GT;
＆LT;形式的行动=＆GT;
    ＆LT;标签=反向＆GT;反向=真＆LT; /标签＆gt;＆LT; BR＆GT;
    ＆LT;输入类型=无线电VALUE =真NAME =反向NG-模式=反向＆GT;＆LT; BR＆GT;＆LT; BR＆GT;
    ＆LT;标签=反向＆GT;反向= FALSE＆LT; /标签＆gt;＆LT; BR＆GT;
    ＆LT;输入类型=电台值=假名称=反向NG-模式=反向＆GT;＆LT; BR＆GT;＆LT; BR＆GT;
    ＆LT;标签=反向＆GT;反向=随机（点击以下按钮重新洗牌）LT; /标签＆gt;＆LT; BR＆GT;
    ＆LT;输入类型=电台值=随机NAME =反向NG-模式=反向＆GT;
＆LT; /表及GT;
＆LT; BR＆GT;＆LT; BR＆GT;
＆LT;输入类型=按钮NG点击=反向='随机'; setOrder（）VALUE =setOrder（）＆GT;
＆LT; BR＆GT;＆LT; BR＆GT;
＆LT; UL ID =清单NG式={身高：（（myList.length * 40）+'像素'）}＆GT;
    ＆LT;李NG重复=项myList中NG式={顶：（（item.order * 40）+'像素'）}＆GT; {{$指数}}  -  {{} item.order }。 {{item.text}}＆LT; /李＆GT;
＆LT; / UL＆GT;

控制器文件

  angular.module（'StackApp'）。控制器（'MainCtrl'，函数（$范围）{
使用严格的;
//订单的状态;真或假的或随机的
$ scope.reverse =假;
//例列表
$ scope.myList = [
    {ID：0，文本：HTML5样板}，
    {ID：1，文本：AngularJS}，
    {ID：2，文本：因果报应}，
    {ID：3，文字：你好}，
    {ID：4，文字：世界}，
    {ID：5，文本：如何}，
    {ID：6，文本：'是'}，
    {ID：7，文本：'你'}，
    {ID：8，文本：？}，
    {ID：9，文字：我}，
    {ID：10，文本：写}，
    {ID：11，文字：多}，
    {ID：12，文字：'到'}，
    {ID：13，文字：让'}，
    {ID：14，文本：的}，
    {ID：15，文字：名单}，
    {ID：16，文本：长'}
];
//监视更改
$范围。$表（反向，函数（）{
    $ scope.setOrder（）;
}）;
//设置列表项的顺序
$ scope.setOrder =功能（）{    的console.log（'变'，$ scope.reverse）;
    //随机顺序
    如果（$ scope.reverse ===随机）{        VAR T = [];        对于（VAR I = 0; I＆LT; $ scope.myList.length;我++）{
            变种R = Math.floor（的Math.random（）* $ scope.myList.length）;
            而（inArray（T，R））{
                R = Math.floor（的Math.random（）* $ scope.myList.length）;
            }
            t.push（R）;
            $ scope.myList [I] .order = R;
        }    }其他{        对于（VAR I = 0; I＆LT; $ scope.myList.length;我++）{
            如果（$ scope.reverse ==='假'）{
                $ scope.myList [I] .order = I;
            }其他{
                $ scope.myList [I] .order =（$ scope.myList.length  -  1  - 我）;
            }
        }
    }
}
//自己的功能;不是最好的，但它足以让这个例子：P
功能inArray（一，价值）{
    对于（VAR I = 0; I＆LT;则为a.length;我++）{
        如果（A [I] ===值）{
            返回true;
        }
    }
    返回false;
}}）;

CSS文件

  #list {
    / *所需，否则项目将在页面顶部（见下文）* /
    位置：绝对的;
    / *全宽，否则会看起来很奇怪* /
    宽度：100％;
}
#list李{
    位置：绝对的;
    / *顶部：0;这将由AngularJS改变为每一个列表项* /
    顶部：0;
    / *项目高度;持这种与模板文件同步* /
    高度：40像素;
    / *简单的过渡* /
    -webkit-过渡：顶级0.5S易于在出;
    -moz-过渡：顶级0.5S易于在出;
    过渡：顶级0.5S易于在出;
}

所以，AngularJS没有订购项目，但它改变了CSS属性顶（ NG-风格={顶：.. }）。 AngularJS不会重新创建列表，我们得到一个漂亮的动画。
：）

I'm rendering a list of objects using ng-repeat with an orderBy filter like this:

<li class="list-item" ng-repeat="item in items | orderBy:predicate:reverse">

My attempts to ng-animate a change in sorting of the list have proven frustrating and aren't worth sharing. I have seen the Yearofmoo example app here.

Unfortunately this demonstration is not quite what I'm trying to achieve. I need to animate the X position of a given list item when it is placed in a new order after the orderBy definition changes. I have tried to accomplish this with css transitions and absolute positioning, but ng-repeat seems to recreate the list items on orderBy making animation a real challenge.

  1. Is this possible with ng-repeat | orderBy (with or without ng-animate)?
  2. Can you suggest an approach or provide an example?

解决方案

So, even if @Alex Osborn has shown a way to do what you want in the comments, here is my attempt:

First, live example: http://jsbin.com/exevom/1/ (only works in non-edit mode)

Code:

Template file

<h1>Animate Order</h1>
<form action="">
    <label for="reverse">reverse = true</label><br>
    <input type="radio" value="true" name="reverse" ng-model="reverse"><br><br>
    <label for="reverse">reverse = false</label><br>
    <input type="radio" value="false" name="reverse" ng-model="reverse"><br><br>
    <label for="reverse">reverse = random (click button below to shuffle again)</label><br>
    <input type="radio" value="random" name="reverse" ng-model="reverse">
</form>
<br><br>
<input type="button" ng-click="reverse = 'random';setOrder()" value="setOrder()">
<br><br>
<ul id="list" ng-style="{height: ((myList.length * 40) + 'px')}">
    <li ng-repeat="item in myList" ng-style="{top: ((item.order * 40) + 'px')}">{{$index}} - {{item.order}}. {{item.text}}</li>
</ul>

Controller file

angular.module('StackApp').controller('MainCtrl', function ($scope) {
'use strict';
// State of the order; true or false or random
$scope.reverse = 'false';
// Example list
$scope.myList = [
    {id:0, text:'HTML5 Boilerplate'},
    {id:1, text:'AngularJS'},
    {id:2, text:'Karma'},
    {id:3, text:'Hello'},
    {id:4, text:'World'},
    {id:5, text:'How'},
    {id:6, text:'Are'},
    {id:7, text:'You'},
    {id:8, text:'?'},
    {id:9, text:'I'},
    {id:10, text:'write'},
    {id:11, text:'more'},
    {id:12, text:'to'},
    {id:13, text:'make'},
    {id:14, text:'the'},
    {id:15, text:'list'},
    {id:16, text:'longer'}
];
// Watch for changes
$scope.$watch('reverse', function () {
    $scope.setOrder();
});
// Sets the order of the list items
$scope.setOrder = function () {

    console.log('change', $scope.reverse);
    // Random order
    if ($scope.reverse === 'random') {

        var t = [];

        for (var i = 0; i < $scope.myList.length; i++) {
            var r = Math.floor(Math.random() * $scope.myList.length);
            while (inArray(t,r)) {
                r = Math.floor(Math.random() * $scope.myList.length);
            }
            t.push(r);
            $scope.myList[i].order = r;
        }

    } else {

        for (var i = 0; i < $scope.myList.length; i++) {
            if ($scope.reverse === 'false') {
                $scope.myList[i].order = i;
            } else {
                $scope.myList[i].order = ($scope.myList.length - 1 - i);
            }
        }
    }
}
// Own function; not the best, but it's enough for this example :P
function inArray(a, value) {
    for (var i = 0; i < a.length; i++) {
        if (a[i] === value) {
            return true;
        }
    }
    return false;
}

});

CSS file

#list {
    /* Needed, otherwise items would be at top of the page (see below) */
    position: absolute;
    /* full width, or it would look strange */
    width: 100%;
}
#list li {
    position: absolute;
    /* Top: 0; this will be changed for every single list item by AngularJS */
    top:0;
    /* Item height; hold this in sync with template file */
    height: 40px;
    /*  Simple transition */
    -webkit-transition: top 0.5s ease-in-out;
    -moz-transition: top 0.5s ease-in-out;
    transition: top 0.5s ease-in-out;
}

So, AngularJS doesn't order the items, but it changes the CSS attribute top (ng-style="{top: ...}"). AngularJS doesn't recreate the list and we get a nice animation. :)

这篇关于我怎样才能动画排序使用NG重复与NG-动画与排序依据列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆