Skip to content

Instantly share code, notes, and snippets.

@netsi1964

netsi1964/lesson01.html

Created July 2, 2012 22:12
Show Gist options
  • Save netsi1964/3036063 to your computer and use it in GitHub Desktop.
Save netsi1964/3036063 to your computer and use it in GitHub Desktop.
Download ZIP
angular: Getting started
Raw
lesson01.html
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script type="text/javascript">
var BorderRadius = function($scope) {
$scope.borders = [
{'value':'top'},
{'value':'right'},
{'value':'bottom'},
{'value':'left'}];
$scope.varer =
[
{'varenr':'11-030','enhed':'kg','navn':'Wax gourd'},
{'varenr':'11-005','enhed':'kg', 'navn':'Sød basilikum'},
{'varenr':'11-047','enhed':'kg','navn':'Lange bønner'},
{'varenr':'11-014','enhed':'kg','navn':'Dværg aubergine'},
{'varenr':'11-028','enhed':'kg','navn':'Papaya'},
{'varenr':'22-202','enhed':'kg','navn':'MANGO (SOUR)'},
{'varenr':'11-087','enhed':'kg','navn':'Babymajs'},
{'varenr':'22-236','enhed':'kg','navn':'GA-TORN'},
{'varenr':'22-204','enhed':'kg','navn':'RAMBUTAN RAMBUTAN'},
{'varenr':'22-209','enhed':'kg','navn':'GUAVA GUAVA'},
{'varenr':'22-212','enhed':'kg','navn':'LYCHEE LYCHEE'},
{'varenr':'22-214','enhed':'kg','navn':'LONGKONG LONGKONG'},
{'varenr':'22-205','enhed':'kg','navn':'Mongosteen'},
{'varenr':'30306001','enhed':'ks','navn':'CHANG BEER 750ml'}
]
}
</script>
</head>
<body ng-controller="BorderRadius">
<h1>Border-radius</h1>
<ul ng-model="borderRadius">
<li ng-repeat="border in borders"><input type="range" min="0" max="50" ng-data="border-{{border.value}}-radius" value="0" ></li>
</ul>
<div style="border-radius: {{borderRadius.bind}}% {{borderRadius/2}}%; width: 100px; height: 100px; border: solid 1px blue;"></div>
<hr />
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query.navn">
<select name="" id="" ng-model="orderBy">
<option value="navn">navn</option>
<option value="enhed">enhed</option>
</select>
<small>Search for {{query.navn}}</small>
</div>
<div class="span10">
<!--Body content-->
<ul class="varer">
<li ng-repeat="vare in varer | filter:query | orderBy:orderBy">
{{vare.varenr}}: {{vare.navn}}
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment