JSFiddle - React, Tailwind, and code Playground

by vrpruthvi

HTML

<script src="http://momentjs.com/downloads/moment.min.js"></script>
<div ng-controller="TasksCtrl">
    <button ng-click="refresh()">Refresh Tasks</button> Click this to feel the delay, then change the HTML on the left to see the no-delay version that uses "track by"
    
    <ul class="tasks">
        <!-- Try commenting the line below and uncommenting the other -->
<!--         <li ng-repeat="task in tasks" task="task" class="task"></li> -->
        <li ng-repeat="task in tasks track by task.id" task="task" class="task"></li>
    </ul>
</div>

CSS

.tasks {
    max-height: 19em;
    overflow-y: scroll;
    border: 3px solid #ccc;
    list-style: none;
    padding: 0;
}

.tasks .task {
    padding: 0.5em;
    border: 1px solid #007aff;
}

.tasks .task .time {
    color: #8f8f8f;
    font-size: 0.7em;
}

JavaScript

angular.module('myApp', [])
.controller('TasksCtrl', function($scope) {
    var date = new Date().toISOString();
    $scope.tasks = [];
    for (var i = 1; i < 301; i++) {
        $scope.tasks.push({
            id: i,
            title: 'Task ' + i, 
            date: date
        });
    }
    
    $scope.refresh = function() {
        console.log("refreshing")
        $scope.tasks = angular.copy($scope.tasks);
    };
})
.directive('task', function() {
    return {
        scope: {
            task: '='
        },
        template: '{{ task.title }} <span class="time">({{ prettyTaskDate }})</span>',
        link: function(scope) {
            console.log('rendering', scope.task.id);
      
            scope.$watch('task.date', function() {
                scope.prettyTaskDate = moment(scope.task.date).fromNow();
            });
        }
    };
});