JSFiddle - React, Tailwind, and code Playground

by Andrea Aloi

HTML

<script src="https://code.angularjs.org/1.3.11/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
    <ul class="list" ng-model="filters" ng-model-options="{debounce: 1000}">
        <li class="item item-checkbox" ng-repeat="type in filters.types">
            <label class="checkbox">
                <input type="checkbox" ng-model="type.checked" ng-model-options="{debounce: 1000}">
            </label>
            {{type.description}}
        </li>
    </ul>
    {{filters.types | selected}}
</body>

JavaScript

console.clear();

angular.module("myApp", [])
.controller("myCtrl", ["$scope", function($scope) {
    $scope.filters = {
    	types: [
      	{id: "A", description: "A filter", checked: true},
        {id: "B", description: "B filter", checked: true},
        {id: "C", description: "C filter", checked: true}
      ]
    };
}])
.filter("selected", [function() {
	return function(array) {  	
  	return array.filter(function(item) {
    	return item.checked;
    });
  }
}]);