JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div ng-app="barsApp" ng-controller="VenueCtrl" ng-init="init()">
    <ul>
        <li ng-repeat="venue in venue.list | filter:genreFilter"> <a href="">{{venue.name}}</a>
        </li>
    </ul>
    <label>Select Genre</label>
    <select ng-model="genreFilter" ng-options="label for label in availableGenres">
        <option value="">All</option>
    </select>
</div>

JavaScript

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

// Create and drop in as a service factory
barsApp.factory('Venues', function () {
    // This will return the Venues object
    var Venues = {};
    // Array of objects
    Venues.list = [{
        id: 0,
        name: 'Bar One',
        genres: ['Rock', 'Metal', 'Dubstep', 'Electro']
    }, {
        id: 1,
        name: 'Bar Two',
        genres: ['Indie', 'Drumstep', 'Dubstep', 'Electro']
    }, {
        id: 2,
        name: 'Bar Three',
        genres: ['Rock', 'Metal', 'Thrash Metal', 'Heavy Metal', 'Electro']
    }, {
        id: 3,
        name: 'Bar Four',
        genres: ['Pop', 'RnB', 'Hip Hop']
    }];
    return Venues;
});

// Setup controller, provide venues model into our scope
function VenueCtrl($scope, Venues) {
    $scope.venue = Venues;
    $scope.availableGenres = [];
    $scope.genreFilter = null;

    $scope.init = function () {
        angular.forEach(Venues.list, function (venue, index) {
            angular.forEach(venue.genres, function (genre, index) {
            //Only add to the availableGenres array if it doesn't already exist
            var exists = false;
            angular.forEach($scope.availableGenres, function (avGenre, index) {
                if (avGenre == genre) {
                    exists = true;
                }
            });
            if (exists === false) {
                $scope.availableGenres.push(genre);
            }
        });
    });
    };

    $scope.setGenreFilter = function (genre) {
        $scope.genreFilter = genre;
    };
}