JSFiddle - React, Tailwind, and code Playground

by Garth Edwards

HTML

<script src="https://code.angularjs.org/1.3.5/angular.js"></script>
<body ng-app="myApp">
    <div ng-controller="RatingsController">

        My Filter Buttons<br>
        <div class="filter">
            <ul>
                <div ng-repeat="myFilter in myFilters">
                    <div data-id="{{myFilter.id}}" ng-click="checkUncheckFilters(myFilter.id)">
                        <label><span class="filter-button" ng-class="{active: myFilter.checked == '1'}"></span>{{myFilter.name}}</label>
    			    </div>
        		</div>
            </ul>
        </div>
    </div>
</body>

CSS

.filter ul {
	column-count:2;
	-webkit-column-count:2;
	-moz-column-count:2;
}
.filter-button {
	display: inline-block;
	width: 10%;
	padding-bottom: 10%;
	margin: -1px 4px 0 0;
	background: #343434;
	display: inline-block;
	margin-bottom: 10px;
}
.filter-button.active{
	background: #9d0e11;
}

JavaScript

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

myApp.controller('RatingsController', ['$scope', 'myServices', function ($scope, myServices) {

    $scope.myFilters = [
        { id : 1, name: "Filter 1", checked: 1 },
        { id : 2, name: "Filter 2", checked: 1 },
        { id : 3, name: "Filter 3", checked: 1 },
        { id : 4, name: "Filter 4", checked: 1 },
        { id : 5, name: "Filter 5", checked: 1 },
        { id : 6, name: "Filter 6", checked: 1 },
        { id : 7, name: "Filter 7", checked: 1 },
        { id : 8, name: "Filter 8", checked: 1 },
        { id : 9, name: "Filter 9", checked: 1 },
        { id : 10, name: "Filter 10", checked: 1 },
    ];

    // Function to check & uncheck filters
	$scope.checkUncheckFilters = function(id){
            console.log(id);
		if($scope.myFilters[id - 1].checked == 1){
			$scope.myFilters[id - 1].checked = 0;					
		} else {
			$scope.myFilters[id - 1].checked = 1;
		//	myServices.filterCheckedListToJSON($scope.filterList.musicFilters);
		//	var filterSelectedJSON = prefsServices.filterCheckedListToJSON($scope.filterList.musicFilters);
		}
		//myServices.filterCheckedListToJSON($scope.filterList.musicFilters);	
                    console.log($scope.myFilters);
	};

}]);
  
myApp.service('myServices', function(){

    /* Function expression to create JSON object
	 * @param filterArray = $scope.filterList.musicFilters or $scope.filterList.venueFilters = array with [{id, name, isChecked}]
	 * @param type = 'all' or 'none' (empty if not coming from either the all or none buttons)
	*/
	this.filterCheckedListToJSON = function(filterArray) {
        var filterIdListJSON = [];
        angular.forEach(filterArray, function(value, index){
            if(value.isChecked = 1){
        		this.push(value.id);
			}
		}, filterIdListJSON);
		return;
	};
});