数据更改时闪烁单元格 AngularJS
[英]Blink cell on data change AngularJS
问题描述
so I'm new to Angular and JS and I've been trying to do something simple with no success.
所以我是 Angular 和 JS 的新手，我一直在尝试做一些简单的事情，但没有成功。
I have a table with data, everytime this data gets changed I want to make a fade in fade out animation so it blinks.我有一个包含数据的表格，每次更改此数据时，我都想制作淡入淡出动画，以便它闪烁。 I assumed I could use $watch to watch if an element changes but it's not working.我假设我可以使用$watch来观察元素是否发生变化但它不起作用。
This is what I got so far:这是我到目前为止得到的：
HTML: HTML：
<tbody md-body>
<tr md-row ng-repeat="item in info.data">
<td md-cell>{{item.name}}</td>
<td md-cell>{{item.id}}</td>
<td md-cell>{{item.thing2}}</td>
<td md-cell>{{item.thing3}}</td>
<td md-cell>{{item.thing4}}</td>
<td md-cell>{{item.thing5}}</td>
</tr>
</tbody>
JS: JS：
$scope.info = {
"data": [
{
name: "ELI 0001",
id: "123",
thing1: "thing",
thing2: "thing",
thing3: "thing",
thing4: "thing",
thing5:"thing",
},
{
name: "ELI 0001",
id: "123",
thing1: "thing",
thing2: "thing",
thing3: "thing",
thing4: "thing",
thing5:"thing",
},
]
};
I added this function to watch the entire data set for changes, and when it does I made an alert.我添加了这个函数来观察整个数据集的变化，当它发生变化时我会发出警报。 I also added the var initialising so it doesn't show up as soon as it loads.我还添加了 var initialising因此它不会在加载后立即显示。
var initializing = true
$scope.$watch('if',function(){
if (initializing) {
$timeout(function() { initializing = false; });
} else {
alert('hey')
}
})
My problem is, how can I get it to watch all cells and execute a class that does the animation only on the data that changed?我的问题是，我怎样才能让它观看所有单元格并执行一个仅对更改的数据执行动画的类？
2 个解决方案
解决方案1
1 2018-04-17 17:21:32
AS this thread https://groups.google.com/forum/#!msg/angular/xZptsb-NYc4/rKAxJ3dQhbMJ , what I ended up doing was this:作为这个线程https://groups.google.com/forum/#!msg/angular/xZptsb-NYc4/rKAxJ3dQhbMJ ，我最终做的是：
app.directive('highlightOnChange', function() {
return {
link: function($scope, element, attrs) {
attrs.$observe('highlightOnChange', function(val) {
var el = $(element);
el.removeClass('blink_me ');
_.defer(function() {
el.addClass('blink_me ')
});
});
}
};
});
That is, creating a directive observes the property.也就是说，创建指令观察属性。 You can then use it like this:然后你可以像这样使用它：
<td md-cell highlight-on-change="{{item.name}}"></td>
...
suppose your css class be:假设您的 css 类是：
.blink_me {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
解决方案2
0 2018-04-17 17:47:15
I was working on a similar approach to @khateeb -- except I am using a $watch on the element's ng-model instead of using $observe on the directive attribute.我正在研究与@khateeb 类似的方法——除了我在元素的ng-model上使用$watch而不是在指令属性上使用$observe 。 Both work!两者都有效！
Plunker: https://embed.plnkr.co/rZVjPmDft997Kmny1LS4/ Plunker： https ://embed.plnkr.co/rZVjPmDft997Kmny1LS4/
Snippet:片段：
(function() { "use strict"; var app = angular .module('plunker', []) .controller('MainCtrl', MainCtrl) .directive('flashTd', flashTD); function flashTD($timeout, $compile) { return { scope: { ngModel: '=' }, link: function($scope, elem, attrs) { // Set a watch on ng-model to wait for value change $scope.$watch('ngModel', function(newVal, oldVal) { if (newVal !== oldVal) { // Flash row // var row = angular.element(elem[0].parentNode.parentNode); // Flash td var td = angular.element(elem[0].parentNode); // Using a timeout to simulate remote data change $timeout(function() { if (td.hasClass('flash')) { td.removeClass('flash'); } $timeout(function() { td.addClass('flash') }) }, 2000) } }) } } } MainCtrl.$inject = ["$scope"]; function MainCtrl($scope) { // Sample Data $scope.info = { "data": [{ name: "ELI 0001", id: "123", thing1: "thing", thing2: "thing", thing3: "thing", thing4: "thing", thing5: "thing", }, { name: "ELI 0001", id: "1234", thing1: "thing", thing2: "thing", thing3: "thing", thing4: "thing", thing5: "thing", }] }; } })()
.editPencil:hover { cursor: pointer; } /* https://stackoverflow.com/questions/14607695/flashing-table-row */ @keyframes flash { from { background-color: #ffbe76; } to { background-color: inherit; } } .flash { animation: flash 1s 1; }
<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS - Flash TD on Change</title> <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" href="style.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> document.write('<base href="' + document.location + '" />'); </script> <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="jumbotron text-center"> <h3>AngularJS - Flash TD on Change</h3> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <form class="form"> <div class="form-group"> <table class="table"> <thead> <tr> <th></th> <th>Name</th> <th>Id</th> <th>Thing1</th> <th>Thing2</th> <th>Thing3</th> <th>Thing4</th> <th>Thing5</th> </tr> </thead> <tbody> <tr ng-repeat="item in info.data"> <td class="editPencil glyphicon-pencil text-center" style="transform: rotate(45deg)" ng-click="editRow = !editRow"></td> <td> <span ng-hide="editRow">{{ item.name }}</span> <input type="text" class="input-sm" ng-model="item.name" ng-hide="!editRow" flash-td /> </td> <td> <span ng-hide="editRow">{{ item.id }}</span> <input type="text" class="input-sm" ng-model="item.id" ng-hide="!editRow" flash-td /> </td> <td> <span ng-hide="editRow">{{ item.thing1 }}</span> <input type="text" class="input-sm" ng-model="item.thing1" ng-hide="!editRow" flash-td /> </td> <td> <span ng-hide="editRow">{{ item.thing2 }}</span> <input type="text" class="input-sm" ng-model="item.thing2" ng-hide="!editRow" flash-td /> </td> <td> <span ng-hide="editRow">{{ item.thing3 }}</span> <input type="text" class="input-sm" ng-model="item.thing3" ng-hide="!editRow" flash-td /> </td> <td> <span ng-hide="editRow">{{ item.thing4 }}</span> <input type="text" class="input-sm" ng-model="item.thing4" ng-hide="!editRow" flash-td /> </td> <td> <span ng-hide="editRow">{{ item.thing5 }}</span> <input type="text" class="input-sm" ng-model="item.thing5" ng-hide="!editRow" flash-td /> </td> </tr> </tbody> </table> </div> </form> </div> </div> </div> </body> </html>
Directive指令
In my demo, I'm flashing the td , but you can as easily change it to flash the target's table row by using the commented-out row variable instead of the td variable.在我的演示中，我正在闪烁td ，但是您可以通过使用注释掉的row变量而不是td变量轻松地将其更改为闪烁目标的表行。
app.directive('flashTd', flashTD);
function flashTD($timeout, $compile) {
return {
scope: {
ngModel: '='
},
link: function($scope, elem, attrs) {
// Set a watch on ng-model to wait for value change
$scope.$watch('ngModel', function(newVal, oldVal) {
if (newVal !== oldVal) {
// Flash row
// var row = angular.element(elem[0].parentNode.parentNode);
// Flash td
var td = angular.element(elem[0].parentNode);
// Using a timeout to simulate remote data change
$timeout(function() {
if(td.hasClass('flash')) {
td.removeClass('flash');
}
$timeout(function() {
td.addClass('flash')
})
}, 2000)
}
})
}
}
}
HTML Element HTML 元素
<input type="text" class="input-sm" ng-model="item.thing2" ng-hide="!editRow" flash-td />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.