JSFiddle - React, Tailwind, and code Playground

by Kirti Vishwakarma

HTML

<script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
<div ng-controller="IconCtrl as ctrl">
  <div ng-repeat="(prop, ignored) in ctrl.icons[0]" ng-init="ctrl.filter[prop] = {}">
    <h3>{{ prop | capitalizeFirst }}</h3>
    <div class="quarter" ng-repeat="value in ctrl.getValuesFor(prop)">
      <label>
        <input type="checkbox" ng-model="ctrl.filter[prop][value]" />
        {{ value }}
      </label>
    </div>
    <hr />
  </div>
  <div>
    <h3>Available icons</h3>
    <div ng-repeat="icon in (ctrl.icons | filter:ctrl.filterByProperties) as filteredIcons">
      {{ icon.name }} <i>({{ icon.Format }})</i>
    </div>
    <hr />
    <b>Number of results: {{ filteredIcons.length }}</b>
  </div>
</div>

JavaScript

(function () {'use strict';

angular.
  module('myApp', []).
  controller('IconCtrl', IconCtrl).
  filter('capitalizeFirst', capitalizeFirstFilter);

// Functions - Definitions
function capitalizeFirstFilter() {
  return function _doFilter(str) {
    return str && (str.charAt(0).toUpperCase() + str.substring(1));
  };
}

function IconCtrl() {
  // Variables - Private
  var self = this;
  
  // Variables - Public
  self.filter = {};
  self.icons = [
    {name: 'Icon A', Format: 'png',checked:"false",size:"1x",style:"solid",platform:"ios"},
    {name: 'Icon B', Format: 'eps',checked:"false",size:"1x",style:"outlines",platform:"Responsive Web"},
    {name: 'Icon C', Format: 'eps',checked:"false",size:"3x",style:"coloured",platform:"ios"},
    {name: 'Icon D', Format: 'png',checked:"false",size:"3x",style:"outlines",platform:"Anroid"},
    {name: 'Icon E', Format: 'jpeg',checked:"false",size:"1x",style:"solid",platform:"ios"},
    {name: 'Icon F', Format: 'gif',checked:"false",size:"2x",style:"solid",platform:"Responsive Web"},
    {name: 'Icon G', Format: 'jpeg',checked:"false",size:"1x",style:"outlines",platform:"ios"},
    {name: 'Icon H', Format: 'svg',checked:"false",size:"2x",style:"solid",platform:"Anroid"},
    {name: 'Icon I', Format: 'png',checked:"false",size:"1x",style:"coloured",platform:"Responsive Web"},
    {name: 'Icon J', Format: 'jpeg',checked:"false",size:"3x",style:"outlines",platform:"Anroid"},
    {name: 'Icon K', Format: 'gif',checked:"false",size:"2x",style:"solid",platform:"Responsive Web"},
    {name: 'Icon L', Format: 'jpeg',checked:"false",size:"1x",style:"coloured",platform:"ios"},
    {name: 'Icon M', Format: 'eps',checked:"false",size:"2x",style:"coloured",platform:"Anroid"} 
  ];
  
  // Functions - Public
  self.filterByProperties = filterByProperties;
  self.getValuesFor = getValuesFor;
  
  // Functions - Definitions
  function filterByProperties(icon) {
    var activeFilterProps = Object.
      keys(self.filter).
     ...