Skip to content

Instantly share code, notes, and snippets.

@kalbarczyk

kalbarczyk/select.html

Last active August 29, 2015 14:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kalbarczyk/f1db670545fa7fa5a962 to your computer and use it in GitHub Desktop.
Save kalbarczyk/f1db670545fa7fa5a962 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS - dyrektywa select - przykład z naszej książki „AngularJS - Pierwsze kroki”, która ukaże się na początku 2015r. dzięki wydawnictwu Helion.
Raw
select.html
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>AngularJS - select</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
</head>
<body data-ng-controller="defaultCtrl">
<div class="container">
<div><h3>Nazwa góry: {{climbing.currentMountain.mountain}}, stopień trudności: {{climbing.grade}} </h3>
<div>
Wybierz nazwę
<select data-ng-model="climbing.currentMountain"
data-ng-options="mountain.mountain +' (' + mountain.metres + ')' group by mountain.country for mountain in mountainsList">
</select>
Wybierz stopień trudności
<select data-ng-model="climbing.grade"
data-ng-options="g for g in grade">
</select>
</div>
</div>
<pre>{{climbing|json}}</pre>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('defaultCtrl', function ($scope) {
$scope.grade = ['Easy', 'Moderate', 'Difficult', 'Hard Difficult', 'Very Difficult', 'Hard Very Difficult', 'Mild Severe', 'Severe', 'Hard Severe', 'Mild Very Severe', 'Very Severe', 'Hard Very Severe', 'Extremely Severe'];
$scope.mountainsList = [
{ mountain: "Mount Everest", metres: 8850, country: 'Nepal-China' },{ mountain: "K2", metres: 8611, country: 'Pakistan-China' }, { mountain: "Kangczendzonga", metres: 8598, country: 'Nepal-India' },{ mountain: "Lhotse", metres: 8501, country: 'Nepal-China' },
{ mountain: "Makalu", metres: 8463, country: 'Nepal-China' },{ mountain: "Cho Oyu", metres: 8201, country: 'Nepal-China' }, { mountain: 'Dhaulagiri', metres: 8167, country: 'Nepal' },{ mountain: 'Manaslu', metres: 8163, country: 'Nepal' }, { mountain: 'Nanga Parbat', metres: 8125, country: 'Pakistan' },{ mountain: 'Annapurna', metres: 8091, country: 'Nepal' }, { mountain: 'Shishapangma', metres: 8012, country: 'China' }
];
$scope.climbing = {
grade: $scope.grade[8],
currentMountain: $scope.mountainsList[1]
};
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment