<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example52-production</title>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.1/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="myApp">
<div ng-controller="appCtrl as appCtrl">
<md-checkbox ng-repeat="doll in appCtrl.enums.dolls"
ng-model="doll.selected">
{{doll.value}}
</md-checkbox>
Selected Dolls:
<md-list layout="column">
<md-item ng-repeat="doll in appCtrl.enums.dolls|filter:{selected: true}">
{{doll.value}}
</md-item>
</md-list>
<md-select ng-model="appCtrl.favorites.doll">
<md-option ng-repeat="item in 'dolls'|enumsListFilter:'id':'value'"
ng-value="item.id">
{{item.value}}
</md-option>
</md-select>
<div>
My Favorite doll: {{appCtrl.favorites.doll|enumsFilter:'dolls'}}
</div>
<md-select ng-model="appCtrl.favorites.digitalGame">
<md-option ng-repeat="item in 'digitalGames'|enumsListFilter:'id':'value'"
ng-value="item.id">
{{item.value}}
</md-option>
</md-select>
<div>
My Favorite digital game: {{appCtrl.favorites.digitalGame|enumsFilter:'digitalGames'}}
</div>
</div>
<script data-require="lodash.js@*" data-semver="3.8.0" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.1/angular-material.min.js"></script>
<script src="app.js"></script>
</body>
</html>
"use strict";
var myModule = angular.module('myApp', ['ui.grid', 'ngAria', 'ngMaterial', 'ngAnimate']);
myModule.controller('appCtrl', appCtrl);
myModule.filter('enumsFilter', function(enums){
return function(eNumber, enumCategory){
if (angular.isUndefined(eNumber)) return '';
return _.trunc(enums[enumCategory]?angular.isDefined(enums[enumCategory][eNumber])?enums[enumCategory][eNumber]:enumber:enumber, 12);
}
});
myModule.filter('enumsListFilter', function(enums){
return function(enumCategory, keyLabel, valueLabel){
if (angular.isUndefined(keyLabel)){
keyLabel = 'id';
}
if (angular.isUndefined(valueLabel)){
valueLabel = 'value';
}
return _.map(enums[enumCategory], function(value, key){
var retVal = {};
retVal[keyLabel] = key;
retVal[valueLabel] = value;
return retVal;
});
}
});
myModule.value('enums', {
dolls: {
0: 'Barbi',
1: 'Ken',
2: 'Dora',
3: 'Spiderman'
},
digitalGames: {
0: 'Pacman',
1: 'Mario Brothers',
2: 'King\'s Quest',
3: 'Defenders of the Crown'
}
});
function appCtrl($filter, enums){
this.enums = {};
this.favorites = {};
this.enums.dolls = $filter('enumsListFilter')('dolls');
this.enumsValue = enums;
}
.cesiumContainer{
height: 50%;
width: 100%;
}