JSFiddle - React, Tailwind, and code Playground

Angular - apply CSS flip Search Filter Images mini gallery viewer

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-controller="MyCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="panel">
<div class="panel-body text-center">
  
 <h2>
 IMAGE THINGY
 </h2>

  <input class="form-control text-block text-center" type="text" ng-model="searchPhotos" /> <div ng-show="!(tags| filter:searchPhotos).length">No Images Found</div>

    <ul>
      <li ng-repeat="myKeys in tags| filter:searchPhotos">{{myKeys}}</li>
    </ul>
    <div class="col-xs-offset-4">
    
  
    <img src="http://placehold.it/300/{{item}}" class="img-rounded img-responsive animated" ng-class="{'flipInY': flippy}">  </div>

    <span ng-init="pipnav.a = 0" ng-show="tags.length > 1" ng-repeat="myKeys in tags| filter:searchPhotos" class="btn btn-xs fa fa-picture-o" ng-class="{'btn-danger': pipnav.a == $index}" ng-click="showMe(myKeys);pipnav.a = $index;"></span>







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

CSS

body{   height: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));}

JavaScript

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller('MyCtrl', function($scope,$timeout) {
 $scope.pipnav = {a: -1};
 $scope.tags = ['3e3234/ffffff/', '546543/ffffff/', '234388/ffffff/', '142526', '264646'];
$scope.showMe = function(e) {
$scope.flippy = false;
//alert(e);
 $scope.item = e + '&text=' + e;
 $timeout(function(){$scope.flippy = true }, 18);
   }
// first run trigger
$scope.showMe( $scope.tags[0]);
});