2

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

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

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

  2. 该示例是每次跨度内的绑定值更改值时触发的最佳方式吗？

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() 设置值

4

0 回答 0