<!doctype html> <html ng-app="SetsList"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript"> var setsList = angular.module('SetsList', []) .controller('SetListCtrl', function ($scope, $http) { $http.get('gearSets.json') .then(function(res) { $scope.sets = res.data.sets; $scope.bonuses = res.data.bonuses; }); $scope.getBonus = function(id) { return $scope.bonuses[id-1].desc } }) .filter('stripcolor', function() { return function(input) { input = input || ''; return input.replace(/\|cffffff/g,"<b>").replace(/\|r/g,"</b>"); }; }) .filter('stripreq',function() { return function(input) { input = input || ''; return input.replace(/^\([^)]+\) /,""); } }) ; </script> <style type="text/css"> #set-list { width: 800px; margin: auto; background-color: #EEE; } .set { margin: 5px; border-bottom: 1px solid #CCC; } .set-bonuses { padding: 0px; } .set-bonuses li { display: inline-block; width: 33%; padding: 3px 0px; margin: 0px; } .set .set-bonuses li:last-child { display: block; width: 100%; border-top: 1px solid #DDD; text-align: center; } .set-name { size: 1.3em; font-weight: bold; margin: 10px 0px 0px 30px; } </style> </head> <body ng-controller="SetListCtrl"> <div id="filters"> <div>Name: <input ng-model="query.name" /></div> <div>Bonus 1: <input ng-model="query.bonuses[1]" /></div> </div> <div id="set-list"> <div class="set" ng-repeat="set in sets | filter:query"> <div class="set-name">{{set.name}}</div> <ul class="set-bonuses"> <li ng-repeat="bonus in set.bonuses">{{bonus.n}} : {{getBonus(bonus.id)|stripcolor|stripreq}}</li> </ul> </div> </div> </body> </html>