JSFiddle - React, Tailwind, and code Playground

by toddmotto

HTML

<div ng-app="app" ng-controller="UserCtrl as user">
  <input type="text" placeholder="Type to filter" ng-model="username" ng-change="user.updateUsers(username);" ng-init="user.updateUsers(username);">
  <p class="filterCount"></p>
  <ul>
    <li ng-repeat="user in user.filteredUsers">
      {{ user.name }}
    </li>
  </ul>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.5.0-rc.0/angular.min.js"></script>
<style>
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #eee;
  margin: 0;
  padding: 0;
}

div[ng-app] {
  padding: 35px;
}

input {
  font-size: 14px;
  outline: 0;
  border: 0;
  padding: 5px 10px;
  border-radius: 3px;
}

JavaScript

function UserCtrl($filter, $interval) {
	var users = [{
  	name: 'Todd Motto'
  },{
  	name: 'Ryan Clark'
  },{
  	name: 'Niels den Dekker'
  },{
  	name: 'Jurgen Van de Moere'
  },{
  	name: 'Jilles Soeters'
  }];
  
  this.updateUsers = function (username) {
  	var filtered = $filter('filter')(users, username);
    filtered = $filter('orderBy')(filtered, 'name');
  	this.filteredUsers = filtered;
  };
  
  this.filteredUsers = users;

}

function testFilter() {
	var filterCount = 0;
	return function (values) {
  	return values.map(function (value) {
    	filterCount++;
      document.querySelector('.filterCount').innerHTML = (
      	'Filter count: ' + filterCount
      );
	    return value;
    });
  };
}

angular
	.module('app', [])
  .filter('testFilter', testFilter)
  .controller('UserCtrl', UserCtrl);