<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.11"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
---------------------
<div class="form-check" ng-repeat="set_cusinies in get_cusinies">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="{{set_cusinies}}" ng-checked="selection.indexOf(set_cusinies) > -1" ng-click="toggleSelection(set_cusinies)"/>{{set_cusinies}}
<div></div>
</label>
</div>
---------------------
<div class="form-check" ng-repeat="set_categories in get_categories">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="{{set_categories}}" ng-checked="selection.indexOf(set_categories) > -1" ng-click="toggleSelection(set_categories)"/>{{set_categories}}
<div></div>
</label>
</div>
<br/>
=================
{{selection}}
++++++++++++++
<div class="listing_loop looping_border" ng-repeat="set_listing in get_listing" >
<div class="width_hun">
<div class="loopitem_description">
<p class="item_name">{{set_listing.businessTypeName}}</p>
<p>{{set_listing.sortNo}}</p>
<p>{{set_listing.cus_name}}</p>
<p>{{set_listing.cat_name}}</p>
</div>
</div>
</div>
<!-- single loop srts -->
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope , $http) {
$http.get('https://api.myjson.com/bins/4m12o').then(function(res) {
$scope.get_listing = res.data;
});
$http.get('https://api.myjson.com/bins/3j8gw').then(function(res) {
$scope.get_categories = res.data;
});
$http.get('https://api.myjson.com/bins/4ulps').then(function(res) {
$scope.get_cusinies = res.data;
});
$scope.resetFilter = function() {
// set filter object as blank
$scope.selection = [];
};
$scope.selection = [];
$scope.toggleSelection = function toggleSelection(set_cusinies) {
var idx = $scope.selection.indexOf(set_cusinies);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(set_cusinies);
}
};
});