<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body >
<h1>Selector</h1>
<div ng-controller="MainCtrl">
<div>
<h3>Group By</h3>
<select name="my-selector" id="my-selector" ng-model="selected"
ng-options="opt.id as (opt.sessions_datetime | date:'short') group by opt.thermal_profiles_label for opt in selectors.sessions_groups">
</select>
</div>
<div>
<h3>Hide "thermal_profiles_label" if is selected </h3>
<select name="my-selector" id="my-selector" ng-model="selected"
ng-options="opt.id as ((opt.sessions_datetime | date:'short') + (selected != opt.id ? ( '(' + (opt.thermal_profiles_label || '') + ')' ) : '') ) for opt in selectors.sessions_groups">
</select>
</div>
</div>
</body>
</html>
// Instantiate the app, the 'myApp' parameter must
// match what is in ng-app
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.selectors = {
sessions_groups: [
{
id: 1,
sessions_datetime: '17/07/2017 10:01',
thermal_profiles_label: 'Baseline',
},
{
id: 2,
sessions_datetime: '17/07/2017 09:44',
thermal_profiles_label: 'Baseline'
}
]
};
});
/* Styles go here */