<!doctype html> <html ng-app="SkillsList"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <script src="ui-bootstrap-tpls-0.12.1.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular-sanitize.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="skillData.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="style.css"> </head> <body ng-controller="SkillListControl"> <h1>Skill data</h1> <div class="col"> <div id="mainSkillList" id="skill-list"> <div class="paginateContain"> <pagination ng-model="currentPage" total-items="rawSkills.length" items-per-page="numPerPage" max-size="maxSize" boundary-links="true"> </pagination> </div> <div class="skill" ng-repeat="skill in skills"> <h2>{{skill.name}}</h2> <div class="cost"><b>Base Cost:</b> {{skill.cost}} <span ng-bind-html="skill.mechanic | resource"></span></div> <p ng-bind-html="skill.description|nl2br|fID"></p> <h3 ng-show="skill.fit.length>0">Formulas</h3> <div class="formula" ng-repeat="(id,fit) in skill.fit"> <span class="formulaID">{{id}}</span><div class="eqn">= <span class="coef">{{fit.mainCoef|number:6}}</span> × <span class="var">MainStat</span> + <span class="coef">{{fit.powerCoef|number:5}}</span> × <span class="var">Power</span></div> <span class="rsq label {{fit.rsq|fitQualityClass}}">R<sup>2</sup>: {{fit.rsq|number:4}}</span> </div> </div> <div class="paginateContain"> <pagination ng-model="currentPage" total-items="rawSkills.length" items-per-page="numPerPage" max-size="maxSize" boundary-links="true"> </pagination> </div> </div> </div> <div class="col"> <div id="selectedSkillList"> </div> </body> </html>