JSFiddle - React, Tailwind, and code Playground

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.0.js"></script>
<h2>
Dynamic Image Gallery menu with JSON to array
</h2><div ng-app="myApp" ng-controller="MyCtrl">
        {{gallerias}}
     {{gallerias.length}}
     <hr>
     <span ng-show="gallerias.length ==> 1" ng-repeat="myKeys in gallerias" class="btn btn-xs fa fa-picture-o" ng-class="{'btn-danger': pipnav.a == $index}" ng-click="showMe(myKeys);pipnav.a = $index;"></span>
</div>

JavaScript

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

app.controller('MyCtrl', function($scope,$timeout) {
// TRY REMOVING AN IMAGE FROM THE JSON
$scope.mprofile=[{"mPhotoL":"drew.jpg","mPhotoS":"asd"}]
 $scope.pipnav = {a: -1};
 var g =$scope.mprofile[0].mPhotoL || null ;
 var h = $scope.mprofile[0].mPhotoS || null ;
$scope.galleria = [];
var res = $scope.galleria.concat(g,h);
$scope.gallerias = [];
$scope.gallerias = $.grep(res,function(n){ return n == 0 || n });

$scope.showMe = function(e) {
alert(e);
}

});