ng-Animage

by Sukanya Halder

HTML

<div class='description'>
  <h3>
Date
</h3>
  <h4>
{{ date_expression | date : format : timezone}}
</h4> Usage : In HTML Template Binding

</div>

<!--<div ng-animate="'slide'" ng-app='myModule' ng-controller='myController'>
  Date<span  ng-model='date1'>{{date1}}</span><br />
  Date<span ng-model='date1'>{{date1|date:'medium'}}</span><br />
  Date<span ng-model='date1'>{{date1|date:'GGG'}}</span><br />
  Date<span ng-model='date1'>{{date1|date:'GGG'}}</span><br />
 </div> -->

<div ng-app='myModule' ng-controller='myController'>
  <div ng-if='showItem' class='div' ng-repeat='name in names'>
    {{name}}
  </div>
  <br />
  <button ng-click='toggleShow()'>
    {{showValue}}
  </button>
  <br />
  <br />
  <input type='text' ng-model='customName' />
  <br />
  <button ng-click='addNames(customName)'>
    Add Name
    
  </button>
</div>

CSS

span {
  padding: 3px;
  margin: 12px;
  background: yellow;
}

a {
  font-family: verdana;
  font-weight: bold;
  font-size: 0.6em;
}

div.ng-enter {
  transition: 0.5s ease all;
  opacity: 0;
}

div.ng-enter.ng-enter-active {
  opacity: 1;
}

JavaScript

var app = angular.module('myModule', ['ngAnimate']);
app.controller('myController', ['$scope', function($scope) {
  $scope.date1 = 20161212;
  $scope.names = ['sukanya', 'chiru', 'debi', 'sujan'];
  $scope.showItem = true;
  $scope.showValue = "Hide";
  
  $scope.toggleShow = function() {
    $scope.showItem = !$scope.showItem;
    if ($scope.showItem) {
      $scope.showValue = "Hide";
    } else {
      $scope.showValue = "Show";
    }
  }
  $scope.addNames = function(customName) {
  debugger
    $scope.names.push(customName);
  }
}]);