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-show="event.active"
      ng-click="onClick(event)">
          <a ng-style="getStyle(event)">{{event.name}}</a>
    </div>
  </script>
  <div ng-controller="DailyCtrl">
      Upcoming events:<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}
  ];
  
  $scope.$on('eventClicked', function(event, calEvent) {
    alert(calEvent.name + ' clicked');
  });
}

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

  $scope.getStyle = function(calEvent) {
    var style = {'text-decoration':'none'};
    if (calEvent.active) {
      return angular.extend({color:'#000'}, style);
    } else {
      return angular.extend({color:'#ccc'}, style);
    }
  };

  $scope.onClick = function(calEvent) {
    $scope.$emit('eventClicked', calEvent);
  };
}