我有一个应用程序,它会轮询服务器以获取项目列表并显示结果。示例小提琴here。
我想在模型更改时使用一些自定义动画,但仅适用于已更改值的属性,即示例中的Item2。
我每次轮询时都会替换控制器中的整个项目集合,如何仅使用已更改的值更新当前列表?我需要循环并比较还是有更好的方式?
每次跨度中的边界值改变值时,示例是最好的触发方式吗?
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()
设置值。