Skip to content

Instantly share code, notes, and snippets.

@netsi1964

netsi1964/bootstrapAngularjs.html

Last active August 29, 2015 13:56
Show Gist options
  • Save netsi1964/9258379 to your computer and use it in GitHub Desktop.
Save netsi1964/9258379 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap and angularJS
Raw
bootstrapAngularjs.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
<title>Bootstrap/angularjs</title>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h2 class="col-md-12">AngularJS fetching
<code>Solr</code>
<code>AJAX</code>request using
<code>$resource</code>
</h2>
<blockquote>Currently using a prefetched
<code>JSON</code>as IIS lacks
<code>response.AddHeader("Access-Control-Allow-Origin","*")</code>
</blockquote>
</div>
</div>
<div class="container" ng-app="myApp" ng-controller="Example">
<div class="row">
<div>
<h3>Solr query params used:</h3>
<table class="table table-stribed">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="param in params">
<th>{{param.name}}</th>
<td>{{param.value}}</td>
<td>{{param.type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<h3>Products</h3>
<div class="list-group col-md-6" ng-repeat="product in response.response.docs | orderBy:'Name'">
<a href="#" class="list-group-item clearfix">
<h4 class="list-group-item-heading">{{product.Name}}</h4>
<hr>
<div class="features col-md-12" first-facet="{{product.ELSProductFeatures}}">
</div>
<div class="categories col-md-12" first-categories="{{product.ELSProductCategories}}"></div>
<p class="list-group-item-text">
<button type="button" class="btn btn-success pull-right">DKK {{product.ProductPrice | number:2}}</button>
</p>
</a>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-resource.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>
<script src="response.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
read.md

A AngularJS boilerplate

Raw
response.js
var response = {
"responseHeader": {
"status": 0,
"QTime": 78,
"params": {
"spellcheck": "true",
"facet": "true",
"fl": "Name, ProductPrice, ELSProductFeatures, ELSProductCategories",
"sort": "Name asc",
"indent": "true",
"facet.query": "ProductPrice:[0 TO 5000]\n",
"start": "15",
"q": "Vaskem*",
"facet.field": ["Type", "ELSProductCategories"],
"wt": "json",
"rows": "15"
}
},
"response": {
"numFound": 207,
"start": 15,
"docs": [{
"ELSProductCategories": "Vaskemaskine;Frontbetjente vaskemaskiner",
"ProductPrice": 3148.8,
"ELSProductFeatures": "{\"Mærke\":{\"value\":\"Electrolux\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"Variabel - 1600 rpm (maks.)\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"7\", \"unit\":\"kg\"},\"Energiklasse\":{\"value\":\"Klasse A++\", \"unit\":\"\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"9994\", \"unit\":\"liter\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Lydniveau\":{\"value\":\"60\", \"unit\":\"dB\"}}",
"Name": "Electrolux EWP1674TDW"
}, {
"ELSProductCategories": "Vaskemaskine;Frontbetjente vaskemaskiner",
"ProductPrice": 4316.0,
"ELSProductFeatures": "{\"Mærke\":{\"value\":\"Electrolux\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"1600 rpm (maks.)\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"7\", \"unit\":\"kg\"},\"Energiklasse\":{\"value\":\"Klasse A++\", \"unit\":\"\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"9994\", \"unit\":\"liter\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Lydniveau\":{\"value\":\"60\", \"unit\":\"dB\"}}",
"Name": "Electrolux ewpt4761fw"
}, {
"ELSProductCategories": "Vaskemaskine;Vaske/tørremaskiner",
"ProductPrice": 4584.0,
"ELSProductFeatures": "{\"Lydniveau\":{\"value\":\"49\", \"unit\":\"dB\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Energiklasse\":{\"value\":\"Klasse B\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Mærke\":{\"value\":\"Electrolux\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"Variabel - 1400 rpm (maks.)\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"7\", \"unit\":\"kg\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"10600\", \"unit\":\"liter\"}}",
"Name": "Electrolux eww1476hdw"
}, {
"ELSProductCategories": "Vaskemaskine;Frontbetjente vaskemaskiner",
"ProductPrice": 2505.6,
"ELSProductFeatures": "{\"Mærke\":{\"value\":\"Candy\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"Variabel - 1400 rpm (maks.)\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"8\", \"unit\":\"kg\"},\"Energiklasse\":{\"value\":\"Klasse A+\", \"unit\":\"\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"10500\", \"unit\":\"liter\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Lydniveau\":{\"value\":\"60\", \"unit\":\"dB\"}}",
"Name": "Candy gc1482d1"
}, {
"ELSProductCategories": "Vaskemaskine;Frontbetjente vaskemaskiner",
"ProductPrice": 4239.2,
"ELSProductFeatures": "{\"Mærke\":{\"value\":\"Candy\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"Variabel - 1200 rpm (maks.)\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"7\", \"unit\":\"kg\"},\"Energiklasse\":{\"value\":\"Klasse A+\", \"unit\":\"\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"9600\", \"unit\":\"liter\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Lydniveau\":{\"value\":\"58\", \"unit\":\"dB\"}}",
"Name": "Candy GC41272D"
}, {
"ELSProductCategories": "Vaskemaskine;Frontbetjente vaskemaskiner",
"ProductPrice": 2616.0,
"ELSProductFeatures": "{\"Mærke\":{\"value\":\"Candy\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"Variabel - 1000 rpm (maks.)\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"5\", \"unit\":\"kg\"},\"Energiklasse\":{\"value\":\"Klasse A+\", \"unit\":\"\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"8100\", \"unit\":\"liter\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Lydniveau\":{\"value\":\"56\", \"unit\":\"dB\"}}",
"Name": "Candy gcy1052d1"
}, {
"ELSProductCategories": "Vaskemaskine;Frontbetjente vaskemaskiner",
"ProductPrice": 4796.0,
"ELSProductFeatures": "{\"Mærke\":{\"value\":\"Gorenje\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"1400 rpm (maks.)\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"7\", \"unit\":\"kg\"},\"Energiklasse\":{\"value\":\"Klasse A+++\", \"unit\":\"\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"9960\", \"unit\":\"liter\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Lydniveau\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"}}",
"Name": "Gorenje EW7443A"
}, {
"ELSProductCategories": "Vaskemaskine;Frontbetjente vaskemaskiner",
"ProductPrice": 5196.0,
"ELSProductFeatures": "{\"Mærke\":{\"value\":\"Gorenje\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"1600 rpm (maks.)\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"8\", \"unit\":\"kg\"},\"Energiklasse\":{\"value\":\"Klasse A\", \"unit\":\"\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"11030\", \"unit\":\"liter\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Lydniveau\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"}}",
"Name": "Gorenje EW8665KW"
}, {
"ELSProductCategories": "Vaskemaskine;Vaske/tørremaskiner",
"ProductPrice": 3310.4,
"ELSProductFeatures": "{\"Lydniveau\":{\"value\":\"57\", \"unit\":\"dB\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Energiklasse\":{\"value\":\"Klasse A\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Mærke\":{\"value\":\"Candy\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"Variabel - 1400 rpm (maks.)\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"8\", \"unit\":\"kg\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"23000\", \"unit\":\"liter\"}}",
"Name": "Candy gow485d"
}, {
"ELSProductCategories": "Vaskemaskine;Frontbetjente vaskemaskiner",
"ProductPrice": 4399.2,
"ELSProductFeatures": "{\"Mærke\":{\"value\":\"AEG\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"1400 rpm (maks.)\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"8\", \"unit\":\"kg\"},\"Energiklasse\":{\"value\":\"Klasse A+++\", \"unit\":\"\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"10780\", \"unit\":\"liter\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Lydniveau\":{\"value\":\"51\", \"unit\":\"dB\"}}",
"Name": "AEG L 75484EFL"
}, {
"ELSProductCategories": "Vaskemaskine;Frontbetjente vaskemaskiner",
"ProductPrice": 6236.0,
"ELSProductFeatures": "{\"Mærke\":{\"value\":\"AEG\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"1400 rpm (maks.)\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"7\", \"unit\":\"kg\"},\"Energiklasse\":{\"value\":\"Klasse A+++\", \"unit\":\"\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"8999\", \"unit\":\"liter\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Lydniveau\":{\"value\":\"59\", \"unit\":\"dB\"}}",
"Name": "AEG L 63472FL"
}, {
"ELSProductCategories": "Vaskemaskine;Frontbetjente vaskemaskiner",
"ProductPrice": 5556.0,
"ELSProductFeatures": "{\"Mærke\":{\"value\":\"AEG\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"Variabel - 1200 rpm (maks.)\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"6\", \"unit\":\"kg\"},\"Energiklasse\":{\"value\":\"Klasse A++\", \"unit\":\"\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"8665\", \"unit\":\"liter\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Lydniveau\":{\"value\":\"58\", \"unit\":\"dB\"}}",
"Name": "AEG l60260fl"
}, {
"ELSProductCategories": "Vaskemaskine;Frontbetjente vaskemaskiner",
"ProductPrice": 5596.0,
"ELSProductFeatures": "{\"Mærke\":{\"value\":\"AEG\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"6\", \"unit\":\"kg\"},\"Energiklasse\":{\"value\":\"Klasse A+++\", \"unit\":\"\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"10800\", \"unit\":\"liter\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Lydniveau\":{\"value\":\"54\", \"unit\":\"dB\"}}",
"Name": "AEG l60460mfl"
}, {
"ELSProductCategories": "Vaskemaskine;Frontbetjente vaskemaskiner",
"ProductPrice": 4236.0,
"ELSProductFeatures": "{\"Mærke\":{\"value\":\"AEG\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"Variabel - 1400 rpm (maks.)\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"7\", \"unit\":\"kg\"},\"Energiklasse\":{\"value\":\"Klasse A+++\", \"unit\":\"\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"8999\", \"unit\":\"liter\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Lydniveau\":{\"value\":\"59\", \"unit\":\"dB\"}}",
"Name": "AEG L62470FL"
}, {
"ELSProductCategories": "Vaskemaskine;Frontbetjente vaskemaskiner",
"ProductPrice": 3108.0,
"ELSProductFeatures": "{\"Mærke\":{\"value\":\"AEG\", \"unit\":\"\"},\"Omdrejninger\":{\"value\":\"Variabel - 1600 rpm (maks.)\", \"unit\":\"\"},\"Kapacitet (Kg)\":{\"value\":\"7\", \"unit\":\"kg\"},\"Energiklasse\":{\"value\":\"Klasse A+++\", \"unit\":\"\"},\"Vandforbrug Pr År Ltr\":{\"value\":\"8999\", \"unit\":\"liter\"},\"Inkluderet Tilbehør\":{\"value\":\"Ikke oplyst\", \"unit\":\"\"},\"Produkt Højde\":{\"value\":\"85\", \"unit\":\"cm\"},\"Lydniveau\":{\"value\":\"58\", \"unit\":\"dB\"}}",
"Name": "AEG L62670FL"
}]
},
"facet_counts": {
"facet_queries": {
"ProductPrice:[0 TO 5000]\n": 101
},
"facet_fields": {
"Type": ["product", 202, "tip", 5],
"ELSProductCategories": ["vaskemaskiner", 173, "vaskemaskine", 171, "frontbetjente", 146, "industri", 21, "tørremaskiner", 18, "vaske", 18, "topbetjente", 7, "opvaskemaskine", 6, "opvaskemaskiner", 4, "til", 4, "tørretumbler", 4, "integrering", 3, "bordopvaskemaskiner", 2, "kondenstørretumblere", 2, "aftrækstørretumblere", 1, "frys", 1, "fryseskabe", 1, "indbygning", 1, "køl", 1, "køle", 1, "1", 0, "2", 0, "3", 0, "af", 0, "afhentning", 0, "alarm", 0, "alm", 0, "amerikanerskabe", 0, "babyalarm", 0, "badeværelseslamper", 0, "barbering", 0, "batterier", 0, "belysning", 0, "blendere", 0, "blodtryksmålere", 0, "boks", 0, "bordlamper", 0, "bortskaffelse", 0, "brødristere", 0, "børne", 0, "dampovne", 0, "dampstationer", 0, "designerlamper", 0, "diverse", 0, "el", 0, "elektriker", 0, "emhætter", 0, "espressomaskiner", 0, "flaskekøler", 0, "foodprocessor", 0, "forretning", 0, "frithængende", 0, "fritstående", 0, "friture", 0, "frysesbokse", 0, "fryseskab", 0, "føntørrer", 0, "gaskogeplader", 0, "gaskomfurer", 0, "glaskeramiske", 0, "glattejern", 0, "grill", 0, "gryder", 0, "gulvlamper", 0, "herreshavere", 0, "hvidevarer", 0, "håndmixere", 0, "håndstøvsugere", 0, "hårklippere", 0, "hårpleje", 0, "hængelamper", 0, "incl", 0, "indbyg", 0, "indendørs", 0, "induktionskogeplader", 0, "induktionskomfurer", 0, "installation", 0, "isenkram", 0, "julebelysning", 0, "kaffe", 0, "kaffemaskiner", 0, "kaffeudstyr", 0, "kantstenslevering", 0, "kat", 0, "kedler", 0, "klima", 0, "klippere", 0, "knive", 0, "kogeplade", 0, "kogeplader", 0, "kol", 0, "kolde", 0, "komfur", 0, "komfurer", 0, "krøllejern", 0, "kun", 0, "køkkenmaskiner", 0, "køkkenredskaber", 0, "køkkenvægte", 0, "køleskab", 0]
},
"facet_dates": {},
"facet_ranges": {}
}
}
Raw
script.js
window.onerror = function() {
console.log(arguments);
};
angular.module("myApp", ["ngResource", "ngSanitize"]).directive('firstFacet', [
function() {
return {
priority: 99,
templateUrl: 'template-facet.html',
replace: true,
transclude: true,
restrict: 'A',
scope: {},
link: function postLink(scope, iElement, iAttrs) {
//var sHTML = "<ul>";
var i = 0;
var a;
a = JSON.parse(iAttrs.firstFacet);
scope.facets = [];
for (var facet in a) {
var fo = a[facet];
scope.facets.push({
name: facet,
value: fo.value,
sort: i++,
unit: fo.unit
});
}
}
};
}]).directive('firstCategories', [
function() {
return {
priority: 99,
templateUrl: 'template-categories.html',
replace: true,
transclude: true,
restrict: 'A',
scope: {},
link: function postLink(scope, iElement, iAttrs) {
scope.categories = iAttrs.firstCategories.split(";");
}
};
}]).controller("Example", function($scope, $sce, $resource) {
var url = "http://sho.1stweb-dev.net/da-DK/JSON.aspx";
// url = "http://remote.1stweb.dk:8089/solr/elsalgtest/select?q=Vaskem*&sort=Name+asc&rows=3&start=15&fl=Name%2C+ProductPrice%2C+ELSProductFeatures%2C+ELSProductCategories&wt=json&indent=true&facet=true&facet.query=ProductPrice%3A[0+TO+5000]%0A&facet.field=Type&facet.field=ELSProductCategories&spellcheck=true";
// url = "http://elsalgdev.service.solr/angularjs/response.json";
// var DWPage = $resource(url, {}, {
// query: {
// method: 'GET',
// responseMethod: "JSON"
// }
// }).query(function() {
// $scope.content = DWPage;
// });
$scope.to_trusted = function(html_code) {
return $sce.trustAsHtml(markFound(html_code, $scope.search));
};
$scope.response = response;
$scope.params = [];
$scope.getParams = function() {
var usedParams = $scope.response.responseHeader.params;
var params = [];
for (var param in usedParams) {
var val = usedParams[param];
var valFixed = val.toString().toLowerCase().replace(/ /g, '');
var type = "text";
type = (valFixed === 'true' || valFixed === 'false') ? 'bool' : type;
type = (!isNaN(parseInt(valFixed, 10))) ? 'number' : type;
type = ( !! valFixed.match(/(\[\d*.TO.\d*\])/ig)) ? 'range' : type;
type = ( !! valFixed.match(/([,.]+)/ig)) ? 'dictionary' : type;
type = (typeof val === "object") ? 'array' : type;
params.push({
"name": param,
"value": val,
"type": type
});
}
$scope.params = params;
};
$scope.getParams();
$scope.clicked = 0;
$scope.click = function() {
if ($scope.firstClick === "") $scope.firstClick = new Date();
$scope.clicked++;
};
});
Raw
style.css
.categories {
margin: .5em 0;
}
.categories button {
margin: 0 .5em 0 0 ;
}
Raw
template-categories-li.html
<ul class="list-inline">
<li ng-repeat="category in categories">{{category}}</li>
</ul>
Raw
template-categories.html
<div class="tag"><button type="button" class="btn btn-info btn-xs" ng-repeat="category in categories">{{category}}</button>&#160;</div>
Raw
template-facet.html
<table class="col-md-12">
<tr ng-repeat="facet in facets | orderBy:'name'">
<th class="col-md-4">{{facet.name}}</th>
<td class="col-md-1">:</td>
<td class="col-md-7">{{facet.value}}&#160;{{facet.unit}}</td>
</tr>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment