JSFiddle - React, Tailwind, and code Playground

by Lance Larsen

HTML

<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div ng-app>
    <div ng-controller="FilterController">
        <div>
            <span ng-repeat="item in filterCollection" ng-class="{ 'selectedClass': $index == selectedIndex }" ng-click="itemClicked($index)">
        [ {{ item }} ]
            </span>
        </div>
    </div>
    <br/>
    <div ng-controller="CollectionController">
        <div> <span ng-repeat="item in itemCollection | filter:sharedData.filterOn">
        [ {{ item }} ]
        </span>
        <br/>Index = {{ sharedData.filterIndex }}</div>
    </div>
</div>

CSS

span {
    cursor: pointer;
}
.selectedClass {
    color: red;
}

JavaScript

var app = angular.module('myApp', []);

app.service('shared', function () {

    //----------------------------------------------------------------------
    // Shared data object - can easily add additional elements
    //----------------------------------------------------------------------
    var sharedData = {
        filterOn: 'A',
        filterIndex: 0
    };

    return {
        //----------------------------------------------------------------------
        // Set field methods, corresponding to elements in shared data
        //----------------------------------------------------------------------
        setFilterOn: function (v) {
            sharedData.filterOn = v;
        },
        setFilterIndex: function (v) {
            sharedData.filterIndex = v;
        },
        //----------------------------------------------------------------------
        // Update method retrieves all shared data values
        //----------------------------------------------------------------------        
        update: function () {
            return sharedData;
        }
    }
});

app.controller('FilterController', function ($scope, shared) {

    //----------------------------------------------------------------------
    // Update method retrieves all shared data values
    //----------------------------------------------------------------------
    $scope.sharedData = shared.update();

    $scope.filterCollection = ["A", "B", "C", "D"];

    $scope.selectedIndex = 0;
    $scope.itemClicked = function ($index) {
        console.log($index);
        $scope.selectedIndex = $index;
        shared.setFilterIndex($index);
        shared.setFilterOn($scope.filterCollection[$index]);
    }
});

app.controller('CollectionController', function ($scope, shared) {

    //----------------------------------------------------------------------
    // Update method retrieves all shared data values
    //----------------------------------------------------------------------...