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 left" ng-class="{'sortSctive':sortBy == 'account'}">
    <div id="acocunt" class="tiny medium " ng-click="sorting('account');">Account 
      <i class="up" ng-show="ascending && sortBy == 'account'"></i>
      <i class="down" ng-show="!ascending && sortBy == 'account'"></i>
     </div>
    </div>
     <div class="width-50" ng-class="{'sortSctive':sortBy == 'dollar'}">
       <div id="amount" ng-click="sorting('dollar');">
       <i class="up" ng-show="ascending && sortBy == 'dollar'"></i>
      <i class="down" ng-show="!ascending && sortBy == 'dollar'"></i>
         <div>Available Cash</div>
         <div class="tiny medium">Today's Change</div>
       </div>
    </div>
  </div>
  <div ng-repeat="contact in contacts" class="box">
        <div class="width-50 accName left">{{contact.accName}}</div>
        <div class="width-50">
            <div class="medium"> {{contact.currency | currency}}</div>
            <div class="tiny medium" ng-class="{'red':contact.percentage < 0,'green':contact.percentage > 0}"> {{contact.percentage}} / {{contact.cash | currency}}</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;
    width: 100%;
    margin: 0;
    padding: 2%;
}
.conatact-item{
  width:50%;
  margin:0 auto;
}
.box{
    width: 96%;
    background-color: #fff;
    padding: 2%;
    border-bottom: 1px solid #ddd;
    /* display: block; */
    overflow: hidden;
    height: 35px;
}
.width-50{
    width: 50%;
    display: inline-block;
}
.tiny{
  font-size:12px;
}
.width-50:nth-child(even) {
   text-align:right;
}
.accName{
  color: #0f8ec7;
   line-height: 35px;
  font-weight:600;
}
.load-more{
  color:#0f8ec7;
  background-color:transparent;
  box-shadow:none;
  border:none;
  font-weight: bold;
  cursor: pointer;
   outline:none;
}
.loadmore{
  width:96%;
  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: 100%;
    padding: 10px 10px;
    cursor: pointer;
}
#amount{
  padding: 2px 20px;
    cursor: pointer;
    position: relative;
}
#amount i{
    position: absolute;
    right: 6px;
    top: 14px;
}
.head{
    padding: 0;
    width: 100%;
}
.left{
  float: left;
}
.sortSctive{
  background-color:#efefef;
}
.green{
  color:#228B22;
}

JavaScript

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

// add a controller
myApp.controller("myCtrl", function($scope) {
		$scope.ascending =  true;
    $scope.loaded =  false;
    $scope.sortBy = 'account';
    var contact1 = [{
     "accName": "IRA - 5200",
     "currency": 5763.36,
     "percentage": -0.08,
     "cash":8916.69
   }, {
     "accName": "AAA - 1812",
     "currency":2010926.10,
     "percentage":+0.21,
     "cash":38881.63
   }, {
     "accName": "AAA - 3810",
      "currency":10050054.07,
     "percentage":+0.07,
     "cash":8916.69
   }]
   var contact2 = [{
     "accName": "AAA - 0029",     
      "currency":39160334.42,
     "percentage":-0.07,
     "cash":31435.87
   }, {
     "accName": "IRA - 0146",
     "currency":15884302.39,
     "percentage":+0.03,
     "cash":7430.83
   }, {
     "accName": "REG - 2019",
     "currency":13465679.34,
     "percentage":+0.00,
     "cash":0.00
   }]
    $scope.contacts = contact1;     
    $scope.showMore = function(){
        contact2.forEach(function(i,index){
        $scope.contacts.push(i);
        $scope.loaded =  true;
      })    	
   };
 
    $scope.sorting = function (item) {
    	$scope.ascending =  !$scope.ascending;  
      $scope.sortBy = item;
      $scope.contacts = [];
      if(item == 'dollar'){
      	contact1.sort(function reverse(a,b) {return $scope.ascending?a.currency-b.currency:b.currency-a.currency;});
        contact2.sort(function reverse(a,b) {return $scope.ascending?a.currency-b.currency:b.currency-a.currency;});
      }else{
      contact1.sort(function reverse(a,b) {
       var temp1 = a.accName.split("-");              
				temp1 = temp1[1].trim();
        var temp2 = b.accName.split("-");              
				temp2 = temp2[1].trim();
       return $scope.ascending?temp1 - temp2:temp2 - temp1;});
        contact2.sort(function reverse(a,b) {
         var temp1 = a.accName.split("-");              
				temp1 = temp1[1].trim();
        var temp2 =...