JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<div ng-app='app'>
  <app></app>
</div>

CSS

*{font-family: arial;}

JavaScript

angular.module('app', [])

.component('app', {
	template: '<stats></stats>'
})

.component('stats', {
	template: '<reports reports="vm.reports"></reports>',
  controller: function($scope){
  	$scope.vm = {
    	reports: [
      	{value: 'Report A'},
        {value: 'Report B'},
        {value: 'Report C'}
      ]
    };
  }
})

.component('reports', {
	bindings:{
  	reports: '='
  },
	template: '<div ng-repeat="report in vm.reports"><report report="report"></report></div>',
  controller: function($scope){
  	var ctrl = this;
  	$scope.vm = {
    	reports: ctrl.reports
    };
  }
})

.component('report', {
	bindings:{
  	report: '='
  },
	template: '<div>{{ vm.report.value }} <report-filter></report-filter></div>',
  controller: function($scope){
  	var ctrl = this;
  	$scope.vm = {
    	report: ctrl.report
    };
  }
})

.component('reportFilter', {
	template: '<select ng-model="vm.model" ng-options="item for item in vm.items"></select>',
  controller: function($scope, reportFilterService){
  	var ctrl = this;
  	$scope.vm = {
    	report: ctrl.report,
      items: reportFilterService.getItems()
    };
  }
})

.factory('reportFilterService', function(){
	return{
  	getItems: function(){
    	return[1, 2, 3];
    }
  };
});