AngularJS - 绑定仅更改了动画的模型属性

时间:2013-07-18 15:01:51

标签: angularjs angularjs-directive angularjs-ng-repeat

我有一个应用程序,它会轮询服务器以获取项目列表并显示结果。示例小提琴here

我想在模型更改时使用一些自定义动画,但仅适用于已更改值的属性,即示例中的Item2。

  1. 我每次轮询时都会替换控制器中的整个项目集合,如何仅使用已更改的值更新当前列表?我需要循环并比较还是有更好的方式?

  2. 每次跨度中的边界值改变值时,示例是最好的触发方式吗?

  3. HTML:

    <div ng-app="myApp">
        <div ng-controller='ItemCtrl'>
            <div ng-repeat="item in items">
                <div>{{item.Name}}</div>
                <div><span>Item1: </span><span animate ng-model="item.Item1"></span></div>
                <div><span>Item2: </span><span animate ng-model="item.Item2"></span></div>
            <div><br>
        </div>
    </div>
    

    JS:

        var myApp = angular.module('myApp', []);
    
        myApp.controller("ItemCtrl", 
            ['$scope', '$timeout', 'getItems1', 'getItems2',
                function ($scope, $timeout, getItems1, getItems2) {
    
            $scope.items = [];
    
            var change = false;
    
            (function tick() {
                bindItems();
                $timeout(tick, 2000);
            })();
    
            function bindItems() {
                if (change) {
                    $scope.items = getItems2;
                }
                else if (!change){
                    $scope.items = getItems1;
                }
    
                change = !change;
            }
        }]);
    
        myApp.factory('getItems1', function() {
    
            return [ 
                {
                    Name: 'foo1',
                    Item1: 1,
                    Item2: 2
                },
                {
                    Name: 'foo2',
                    Item1: 3,
                    Item2: 4
                },
            ];
    
        });
    
        myApp.factory('getItems2', function() {
    
            return [ 
                {
                    Name: 'foo1',
                    Item1: 1,
                    Item2: 6
                },
                {
                    Name: 'foo2',
                    Item1: 3,
                    Item2: 8
                },
            ];
    
        });
    
        myApp.directive('animate', function(){
    
        // Some custom animation when the item within this span changes
    
        return {
            require: 'ngModel',
            link: function(scope, elem, attrs, ngModel) {
                scope.$watch(function() {
                    return ngModel.$modelValue;
                }, function (newValue, oldValue, other) {
                    var $elem = $(elem);
    
                    console.log(newValue + ' ' + oldValue + ' ' + other);
                    // I don't want to animate if the values are the same, but here
                    // oldValue and newValue are the same, because I'm replacing the 
                    // entire items list??
                    //if (newValue === oldValue)
                    //{
                    //    $elem.html(newValue);
                    //} else
                    {
                    // oldValue same as newValue, because I'm replacing the entire items
                    // list??
                        $elem.html(oldValue);
                        $elem.slideUp(1000, function() {
                            $elem.html(newValue);
                        }).slideDown(1000);
                    }
                });
        }
    };
    
        })
    

    更新

    通过循环遍历列表并单独更新属性来实现此目的。 jsfiddle

    虽然觉得应该有一个更好的方法,a)不需要遍历属性,b)可以挂钩到手表上的事件之前和之后,所以不需要使用.html()

    设置值。

0 个答案:

没有答案