Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html data-ng-app="app">
  <head>
    <meta charset="utf-8" />
    <title>20115875</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" data-semver="1.3.15"></script>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
​
    <style type="text/css">
      .highlight {
        background-color: lightgreen;
        transition: background 200ms;
      }
    </style>
  </head>
​
  <body data-ng-controller="AppCtrl as ctrl">
    <div class="container">
      <div class="page-header">
        <h1>Angular js - Highlight dom when value changes</h1>
      </div>
​
      <table class="table">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
​
        <tbody>
          <tr data-ng-repeat="person in ctrl.people track by $index">
            <td data-highlighter="person.firstName">{{ person.firstName }}</td>
            <td data-highlighter="person.lastName">{{ person.lastName }}</td>
          </tr>
        </tbody>
      </table>
​
      <button type="button" data-ng-click="ctrl.loadData()" class="btn btn-primary">load new data</button>
      <button type="button" data-ng-click="ctrl.changeValue()" class="btn btn-default">change single value</button>
      <button type="button" data-ng-click="ctrl.revert()" class="btn btn-default">revert to initial</button>
    </div>
  </body>
</html>
​
 
(function (app, ng) {
  'use strict';
​
  var initial =  [
    { "firstName": "John", "lastName" : "Doe"       },
    { "firstName": "John", "lastName" : "Appleseed" }
  ];
​
  var changed =  [
    { "firstName": "Jane",    "lastName" : "Marple" },
    { "firstName": "Hercule", "lastName" : "Poirot" }
  ];
​
  app.controller('AppCtrl', [function(){
    var vm = this;
​
    vm.people = ng.copy(initial);
​
    vm.loadData = function loadData() {
      vm.people = ng.copy(changed);
    };
​
    vm.changeValue = function changeValue() {
      vm.people[0].firstName = 'Jane';
    };
​
    vm.revert = function revert() {
      vm.people = ng.copy(initial);
    };
  }]);
​
  app.directive('highlighter', ['$timeout', function($timeout) {
    return {
      restrict: 'A',
      scope: {
        model: '=highlighter'
      },
      link: function(scope, element) {
        scope.$watch('model', function (nv, ov) {
          if (nv !== ov) {
            // apply class
            element.addClass('highlight');
​
            // auto remove after some delay
            $timeout(function () {
              element.removeClass('highlight');
            }, 1000);
          }
        });
      }
    };
  }]);
})(angular.module('app', []), angular);
​
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers