AngularJS playground

angularjs-playground.markdown

AngularJS playground

AngularJS playground, select boxes and grouping options in selectboxes

A Pen by wiktusser on CodePen.

License.

index.html

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div ng-app="myApp">
<div class="container" ng-controller="Ctrl_List">
  <div class="row">
    <div class="col-md-12">
      
    </div>
  </div>
  <div class="row">
    <div class="col-md-6" ng-repeat="currencies in currencies">      
      <div class="b-component">
  <div class="b-component-header">{{currencies.pair}}</div>
  <div class="b-field"> 
        <div class="b-field-values">
      <div class="top">Sell {{currencies.pair.split(' ')[0]}}</div>
      <div class="bottom">
          
          <div class="beginning">{{splitToStrings(currencies.sell,0 ,4)}}</div>
        <div class="middle">{{splitToStrings(currencies.sell,4 ,6)}}</div>
        <div class="end">{{splitToStrings(currencies.sell,6 ,7)}}
        {{checkValueLength(currencies.sell)}}
        </div></div>
    </div>  
</div> 
  <div class="b-arrow">
    <div class="down"></div>
    <div class="up"></div>
        </div>
        
        
  <div class="b-field b-field-right">
    <div class="b-field-values">
    <div class="top">Buy {{currencies.pair.split(' ')[0]}}</div>
      <div class="bottom">
        <div class="beginning">{{splitToStrings(currencies.buy,0 ,4)}}</div>
        <div class="middle">{{splitToStrings(currencies.buy,4 ,6)}}</div>
        <div class="end">{{splitToStrings(currencies.buy,6 ,7)}}</div>
      </div>
    </div>
  </div>
</div>  
      
      
</div>

  </div>
</div>
  </div>

script.js

angular
  .module("myApp", [])
  .controller("Ctrl_List", [
    "$scope",
    function(s) {
      s.splitToStrings = function(number, start, stop) {
        var string = number.toString();
        var array = string.substring(start, stop);
        return array;
      };

      s.currencies = [
        {
          pair: "USD CHF",
          buy: 0.99143,
          sell: 0.99043
        },
        {
          pair: "GBP USD",
          buy: 1.28495,
          sell: 1.2836
        },
        {
          pair: "GBP CHF",
          buy: 1.27378,
          sell: 1.27147
        },
        {
          pair: "EUR SEK",
          buy: 9.632,
          sell: 9.6055
        },
        {
          pair: "USD JPY",
          buy: 110.467,
          sell: 110.417
        },
        {
          pair: "EUR JPY",
          buy: 120.589,
          sell: 120.491
        }
      ];
    }
  ])
  .controller("mainControler", ["$scope", function(s) {}]);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.less

body {
  font-family: 'Open Sans', sans-serif;
}
.b-component {
  width: 435px;
  height: 150px;
  display: inline-block;
  background: #f5f5f5;
  border: 2px solid #404040;

  .b-component-header {
    background: #404040;
    font-size: 20px;
    color: white;
    text-transform: uppercase;
    text-align: center;
  }

  .b-arrow {
    position: absolute;
    display: inline-block;
    top: 40px;
    left: 221px;
    width: 20px;
    height: 30px;
    .down {
      position: absolute;
      bottom: 0;
      width: 0;
      left: 4px;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 25px solid black;
    }
    .down {
      position: absolute;
      bottom: 0;
      width: 0;
      left: 4px;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 25px solid red;
    }
    .up {
      display: none;
    }
  }

  .b-field {
    position: relative;
    z-index: 1;
    float: left;
    margin: 10px;
    width: 160px;
    height: 69px;
    background: white;
    color: red;
    border: 1px solid #ccc;

    border-width: 2px 0 2px 2px;
    box-shadow: inset 0 0 0 -10px black;
    border-radius: 2px;

    .b-field-values {
      position: relative;
      width: 99%;
      height: 100%;
      border-radius: 3px;
      background: white;
    }

    &:hover {
      border-color: green;

      &:after {
        border-color: green;
      }
    }

    &:after {
      height: 61px;
      width: 57px;
      content: "";
      position: absolute;
      z-index: -1;
      transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      border: 1px solid #ccc;
      border-width: 2px 2px 0px 0px;
      border-radius: 19px 12px 20px 0;
      border-top-right-radius: 30%;
      top: 2px;
      right: -27px;
      background: white;
    }

    .top {
      font-size: 16px;
    }

    .bottom {
      height: 45px;
      position: absolute;
      bottom: 0;
      // padding-bottom:10px;
      margin-bottom: 2px;

      .beginning {
        font-size: 30px;
      }

      .middle {
        font-size: 40px;
        font-weight: 700;
        line-height: 50px;
        vertical-align: bottom;
      }

      .end {
        font-size: 30px;
        line-height: 30px;
        vertical-align: top;
      }

      div {
        display: inline-block;
      }
    }
  }
  .b-field-right {
    float: right;
    border-width: 2px 2px 2px 0px;
    color: green;

    &:after {
      transform: rotate(-135deg);
      left: -30px;
    }

    .top, .bottom {
      text-align: right;
    }

    .bottom {
      right: 0;
    }
  }
}

styles

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet" />