在数据更改AngularJS上闪烁单元格答案

【问题标题】：Blink cell on data change AngularJS在数据更改AngularJS上闪烁单元格
【发布时间】：2018-04-17 14:24:55
【问题描述】：

所以我是 Angular 和 JS 的新手，我一直在尝试做一些简单但没有成功的事情。

我有一个包含数据的表格，每次更改此数据时，我都想制作淡入淡出动画，使其闪烁。我以为我可以使用$watch 来观察元素是否发生变化但它不起作用。

这是我目前得到的：

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：

 $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",
    },
  ]
};

我添加了这个功能来观察整个数据集的变化，当它发生变化时我发出警报。我还添加了 var initialising，因此它不会在加载后立即显示。

var initializing = true
$scope.$watch('if',function(){
  if (initializing) {
    $timeout(function() { initializing = false; });
  } else {
    alert('hey')
  }
})

我的问题是，我怎样才能让它观察所有单元格并执行一个只对更改的数据执行动画的类？

【问题讨论】：

向表格的每个单元格添加事件侦听器，并在单个单元格上触发。
如何更改数据？
我现在正在模拟按钮点击

标签： javascript angularjs angular-material

【解决方案1】：

作为这个线程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 ')
        });
      });
    }
  };
});

也就是说，创建指令会观察属性。然后你可以像这样使用它：

<td md-cell highlight-on-change="{{item.name}}"></td>
...

假设你的 css 类是：

.blink_me {
  animation: blinker 1s linear infinite;
}    
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

【讨论】：

【解决方案2】：

我正在研究与@khateeb 类似的方法——除了我在元素的ng-model 上使用$watch 而不是在指令属性上使用$observe。两者都有效！

Plunker：https://embed.plnkr.co/rZVjPmDft997Kmny1LS4/

片段：

(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>

指令

在我的演示中，我正在刷新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 元素

 <input type="text" class="input-sm" ng-model="item.thing2" ng-hide="!editRow" flash-td />

【讨论】：