JSFiddle - React, Tailwind, and code Playground

by dmitri14

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<div class="app">
  <famous-people></famous-people>
</div>

JavaScript

angular
  .module('app', [])
  .directive('famousPeople', function () {
    return {
      restrict: 'E',
      template: [
        '<div>',
          '<p>0',
          '<input type="range" min="0" max="100" step="1" ng-model="ctrl.inputAge" />',
          '100</p>',
          '<span>current min age: {{ ctrl.inputAge }}</span>',
          '<ul>',
          '<li ng-repeat="person in ctrl.people | ageFilter:ctrl.inputAge ">{{ person.name }} ({{ person.age }})</li>',
          '</ul>',
        '</div>'
      ].join(''),
      controllerAs: 'ctrl',
      controller: function() {
        var ctrl = this;
        
        ctrl.inputAge = 20;

        ctrl.people = [{
          name: 'Justin Bieber',
          age: 21
        }, {
          name: 'Miley Cyrus',
          age: 23
        }, {
          name: 'John Legend',
          age: 37
        }, {
        	name: 'Betty White',
          age: 94
        }, {
          name: 'Roger Waters',
          age: 72
        }, {
          name: 'Larry Page',
          age: 42
        }, {
        	name: 'You played around with the code, awesome!',
          age: 10
        }
        ]
      }
    }
  })
  .filter('ageFilter', function() {
    return function(input, minAge) {
      return input.filter(function (person) {
	      return person.age >= +minAge;
      });
    }
  });

angular.bootstrap(document.querySelector('.app'), ['app']);