Angular: Empty Fiddle

http://angularjs.org/

by Loxos

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="RunSelectorCtrl">
  <div class="runSelector">
      <div class="cover">
        <div class="title">
          Run Selector
        </div>
        <div class="previewCount">
          {{selectedRuns.length}}
        </div>
        runs <br/> selected
      </div>
      <div class="content">
        <div>
          <div class="title">
            Run Configurations
          </div>
          <div class="runGroupList" ng-show="view == 'runGroupList'">
            <ul>
              <li ng-repeat="runGroup in runGroups" ng-click="selectRunGroup(runGroup)">{{runGroup.name}}</li>
            </ul>
          </div>
          <div class="rangeSelection" ng-show="view == 'rangeSelection'">
            Select runs
            <ul>
            <li ng-repeat="(key, value) in groupedRuns">{{key}}teest</li>
            </ul>
          </div>
        </div>
      </div>
  </div>
</div>

CSS

.runSelector {
  font-family: Arial;
  background-color:white;
}

.runSelector > div {
   float:left;
   width: 250px;
   height:250px;
}

.runSelector .title{
  padding: 5px 0;
  font-size:18px;
  text-align:center;
  color: darkgray;
}



.runSelector .cover{
  color: white;
  background-color:#2e75b6;
  text-align:center;
}

.runSelector .cover .title {
  background-color:#1F4E79;
}

.runSelector .cover .previewCount {
  font-size:100px;
}
.content {
  background-color:white;
}

.runGroupList li {
  padding: 10px 20px;
  font-size: 18px;
  cursor:pointer;
}

.runGroupList li:hover {
  background-color:lightgray;
}

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function RunSelectorCtrl($scope) {
	$scope.view = 'runGroupList';
	$scope.runs = [{group:"standard1", name:"aRunName", start:1234567},
  	{group:"standard1", name:"aRunName", start:1234567},
    {group:"anotherStandard", name:"aRunName", start:1234567},
    {group:"anotherStandard", name:"aRunName", start:1234567}];
  $scope.groupedRuns = [];
  $scope.runs.forEach(function(run){if(!$scope.groupedRuns[run.group]){$scope.groupedRuns[run.group] = []}$scope.groupedRuns[run.group].push(run)});
  $scope.runGroups = [{name:"standard1"},{name:"anotherStandard"}];
  $scope.selectedRuns = [];
  
  $scope.selectRunGroup = function(runGroup){
  	$scope.view = "rangeSelection";
    $scope.selectedRunGroup = runGroup;
  };
}