JSFiddle - React, Tailwind, and code Playground

by alfrescian

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div data-ng-controller="dashboard_controller">
    
<h1>
    Catalogs
    <input type="text" data-ng-model="catalog_filter"  placeholder="Filter Distributors">
</h1>

    <div class="catalogs_listing">
        <ul data-ng-repeat="catalog in catalogs | distributorName: catalog_filter:distributors">
            <li> <a href="{{catalog.distributor_id}}/d/products/catalog_view/{{catalog.uid}}">
                <div class="catalog_thumb">
                    <div class="catalog_thumb_image">
                        <span>demo - no image</span>
                    </div>
                </div>
                <div class="catalog_info">
                    <h2>{{distributors[catalog.distributor_id].name}} <span>{{catalog.products_count}}p</span></h2>
                    <p>{{catalog.name}}</p>
                </div>
            </a>

            </li>
        </ul>
    </div>
</div>

JavaScript

angular.module('myApp', [])
    .controller("dashboard_controller", function ($scope) {
    $scope.distributors = gDistributors.data;
    $scope.catalogs = gCatalogs.data;
}).filter('distributorName', function() {
  return function(items, filterValue, distributors) {
      if (!filterValue){
          return items;
      }  
      var result = {};
        angular.forEach(items, function(value, key) {
            var distributor = distributors[value.distributor_id];
            if (distributor && distributor.name && distributor.name.toLowerCase().indexOf(filterValue.toLowerCase()) > -1){
                result[key] = value;
            }
        });
        return result;
    };
});

var gDistributors = {
    "data": {
        "9kkE1sL8vXSZMVaL": {
            "created": "1346840145.22",
                "uid": "9kkE1sL8vXSZMVaL",
                "created_by": "3W7AoIQHTtvPauaK",
                "name": "Nikee",
                "description": "Just do it",
                "image_file": "LogoNike.jpg",
                "modified": "1368443518.3894",
                "modified_by": "3W7AoIQHTtvPauaK",
                "currency": "gbp"
        },
            "1OBKUhpb8srwHVVb": {
            "created": "1346840213.41",
                "uid": "1OBKUhpb8srwHVVb",
                "created_by": "3W7AoIQHTtvPauaK",
                "name": "Zappos",
                "description": "The webs most popular shoe store",
                "image_file": "zappos.jpg",
                "modified": "1347006513.93",
                "modified_by": "3W7AoIQHTtvPauaK",
                "currency": null
        },
            "qHPXDp5lSQuz9z3Q": {
            "created": "1346840305.78",
                "uid": "qHPXDp5lSQuz9z3Q",
                "created_by": "3W7AoIQHTtvPauaK",
                "name": "Kitchenaid",
                "description": "For the way it's made",
                "image_file": "kitchenaid_logo.gif",
                "modified": "1346840305.78",
               ...