Angular - Module

Module with controller, filter, and directive.

by Premchand R

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <div class="conatact-item">
  <div class="box head">
    <div class="width-50">
    <div id="acocunt" class="tiny medium " ng-click="sorting();">Account 
      <i class="up" ng-show="ascending"></i>
      <i class="down" ng-hide="ascending"></i>
     </div>
    </div>
     <div class="width-50">
       <div>Available Cash</div>
       <div class="tiny medium">Today's Change</div>
    </div>
  </div>
  <div ng-repeat="conatact in contacts " class="box">
        <div class="width-50 accName">{{conatact.accName}}</div>
        <div class="width-50">
            <div class="medium"> {{conatact.currency}}</div>
            <div class="tiny medium" ng-class="{'red':conatact.negative}"> {{conatact.percentage}}</div>
          </div>
    </div>
    <div class="loadmore" ng-hide="loaded">
    <button class="load-more" ng-click="showMore()">Load more</button>
    </div>
  </div>
</body>

CSS

body{
  background-color:#0f8ec7;
}
.conatact-item{
  width:50%;
  margin:0 auto;
}
.box{
    width: 98%;
    background-color: #fff;
    padding: 2%;
    border-bottom: 1px solid #ddd;
    /* display: block; */
    overflow: hidden;
    height: 35px;
}
.width-50{
    width: 49%;
    display: inline-block;
}
.tiny{
  font-size:12px;
}
.width-50:nth-child(even) {
   text-align:right;
}
.accName{
  color: #0f8ec7;
  font-weight:600;
 margin-top: -15px;
}
.load-more{
  color:#0f8ec7;
  background-color:transparent;
  box-shadow:none;
  border:none;
  font-weight: bold;
   outline:none;
}
.loadmore{
  width:98%;
  padding:2%;
  background-color:#fff;
  text-align:center;
}
.medium{
  font-weight:600;
}
i {
  border: solid #0f8ec7;
  margin-left: 4px;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}
.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.red{
  color:red;
}
#acocunt{
      width: 35%;
    padding: 10px 0px;
    cursor: pointer;
}
.head{
  padding: 1% 2%;
    width: 98%;
}

JavaScript

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
		$scope.ascending =  true;
    $scope.loaded =  false;
    var contact1 = [{
      "accName": "IRA - 5200",
      "currency": "5763.36",
      "percentage": "-0.08 / $8916.69",
      "negative":true
    }, {
      "accName": "AAA - 3810",
      "currency": "5763.36",
      "percentage": "-0.08/$8916.69",
      "negative":false
    }, {
      "accName": "IRA - 5200",
      "currency": "5763.36",
      "percentage": "-0.08/$8916.69",
       "negative":false
    }]
    var contact2 = [{
      "accName": "AAA - 1820",
      "currency": "5763.36",
      "percentage": "-0.08 / $8916.69",
      "negative":true
    }, {
      "accName": "AAA - 3810",
      "currency": "5763.36",
      "percentage": "-0.08/$8916.69",
      "negative":false
    }, {
      "accName": "IRA - 5200",
      "currency": "5763.36",
      "percentage": "-0.08/$8916.69",
       "negative":false
    }]
    $scope.contacts = contact1;     
    $scope.showMore = function(){
      contact2.forEach(function(i,index){
      $scope.contacts.push(i);
      $scope.loaded =  true;
    })
     	
   }
   
    $scope.sorting = function () {
    	$scope.ascending =  false;
   }
});