Formula1 with AngularJS

by Ivan Gerasimenko

HTML

<div ng-app='app'>
    <div ng-controller='controlF1' ng-init='topSpeedFilter=300'>
        Top speed greater than: 
        <input type='number' ng-model='topSpeedFilter' />km/h
        <hr>
        <div class='team' ng-repeat='team in teams' 
            ng-show='team.topSpeed > topSpeedFilter'
            ng-switch='team.engine'>
            <div class='team-info'>
                {{team.name}} is driven by:
                <ul>
                    <li ng-repeat='driver in team.drivers'>
                        {{driver.name}}
                    </li>
                </ul>
            </div>
            <div class='car-info'>
                Car's top speed: {{team.topSpeed}}km/h
                <div>
                    ENGINE BY: 
                    <img src='http://www.serviciosglobal.com/images/logos/carmakes/Renault_logo.jpg' ng-switch-when='Renault'/>
                    <img src='http://www.northshoreautoclinic.com/wp-content/uploads/2013/01/ferrari_logo-50x50.png' ng-switch-when='Ferrari'/>
                    <img src='http://www.northshoreautoclinic.com/wp-content/uploads/2013/01/Mercedes_Benz_logo-1-70x50.png' ng-switch-when='Mercedes'/>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.team { display: table-row; }
.team-info, .car-info { 
    display: table-cell; 
    padding: 10px 10px 0 10px;
    border-bottom: 1px solid #cccccc;
    border-right: 1px dashed #cccccc;
}

JavaScript

/*     
    * ng-init
    * ng-switch
    * ng-show
    * ng-repeat
*/

angular.module('app',[]).controller('controlF1', function ($scope) {
    $scope.teams = [
        {name: 'RBR', drivers: [
            {name: 'Vettel'},{name: 'Richiardo'}],
         topSpeed: 320,
         engine: "Renault"},
        {name: 'Ferrari', drivers: [
            {name: 'Alonso'},{name: 'Raikkonen'}],
         topSpeed: 323,
         engine: "Ferrari"},
        {name: 'Mercedes', drivers: [
            {name: 'Hamilton'},{name: 'Rosberg'}],
         topSpeed: 325,
         engine: "Mercedes"},
        {name: 'Maclaren', drivers: [
            {name: 'Batton'},{name: 'Magnussen'}],
         topSpeed: 321,
         engine: "Mercedes"}
    ];
});