var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.area = '';
$scope.category = 0;
$scope.response = {};
$scope.requestAPI = function (area, category) {
if(area != ''){
$http.get("https://www.reddit.com/r/GlobalOffensive/"+ $scope.area +".json?limit="+category).then(function(res){
console.log('res', res);
$scope.response = res.data.data.children;
});
}
}
$scope.$watch('area', function() {
$scope.requestAPI($scope.area, $scope.category);
});
$scope.$watch('category', function() {
$scope.requestAPI($scope.area, $scope.category);
});
});
<!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" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<pre>{{area}}</pre>
<pre>{{category}}</pre>
<pre>{{response}}</pre>
<br>
<form>
<input type="radio" value="hot" ng-model="area"> Hot<br>
<input type="radio" value="top" ng-model="area"> Top<br>
<input type="radio" value="new" ng-model="area"> New
</form>
<br>
<form>
<input type="radio" value="1" ng-model="category"> Limit 1<br>
<input type="radio" value="5" ng-model="category"> Limit 5<br>
<input type="radio" value="10" ng-model="category"> Limit 10
</form>
<br>
<div>
<ul class="list-group">
<li ng-repeat="item in response" class="list-group-item">{{ item.data.title }}</li>
</ul>
</div>
</body>
</html>
/* Put your css in here */