JSFiddle - React, Tailwind, and code Playground

by alimills

HTML

<script src="http://code.angularjs.org/1.0.0rc6/angular-1.0.0rc6.js"></script>
<div ng-app="cal">
  <script type="text/ng-template"  id="eventsView.html">
    <div
      ng-repeat="event in events"
      ng-style="getStyle(event.active)">
        {{event.name}}
    </div>
  </script>
  <div ng-controller="DailyCtrl">
      <h3>Upcoming events:</h3>
      <events model="eventsModel"></events>
  </div>
</div>

JavaScript

var cal = angular.module("cal", []);

cal.directive("events", function() {
    return {
        restrict: 'E',
        scope: true,
        templateUrl: "eventsView.html",
        controller: EventsCtrl
    };
});

DailyCtrl = function($scope) {
  $scope.eventsModel = [
    {name:'eat', active:true},
    {name:'drink', active:false},
    {name:'sleep', active:false},
    {name:'play', active:true},
    {name:'work', active:true},
    {name:'learn', active:true}
  ];
}

EventsCtrl = function($scope, $attrs) {
  $scope.$watch($attrs.model, function(value) {
    if (value) {
      $scope.events = value;
    }
  });

  $scope.getStyle = function(isActive) {
    if (isActive) {
      return {color:'#000'};
    } else {
      return {color:'#ccc'};
    }
  };
}