1

I am trying to display all my images in my side menu in ionic with ng-repeat via cloudinary api. Ionic Whitelist plugin is already added.

Part of my MapController:

var imageArray = [];

      var json = $http.get('https://api.cloudinary.com/v1_1/singapore-land-authority/resources/image');
      json.success(function(data, status, headers, config) {
        //cloudinaryRes = JSON.stringify({ data: data });
        //var dataRes = JSON.stringify(data.contents);
        var dataLength = data.contents.resources.length;
        //$scope.imageResources = dataRes;
        //console.log("Data Data: " + dataRes);
        //console.log("Array Length: " + dataLength);
        for (i = 0; i < dataLength; i++) {
        //$scope.imageResources = JSON.stringify(data.contents.resources[i]);
        //imageArray.push(data.contents.resources[i].url);
        //console.log("Image Resources: " + $scope.imageResources);
        //console.log("Image Resource Array: " + JSON.stringify(data.contents.resources[i].url));
        console.log("JSON Array Data Contents: " + JSON.stringify({id: i, url: data.contents.resources[i].url}));
        //imageArray.push(JSON.stringify({id: i, url: data.contents.resources[i].url}));
        imageArray.push(JSON.stringify({url: data.contents.resources[i].url}));
        //imageArray.push(JSON.stringify(data.contents.resources[i].url));
        }

        $scope.imageResources = imageArray;
        console.log("Array Objects: " + imageArray);
        console.log("$scope.imageResources: " + $scope.imageResources);

        /*$scope.images = imageArray;
        console.log("Image Array: " + imageArray);*/
        /*$scope.imageExists = function(image, object, index) {
            var img = new Image();
            img.onload = function() {
              object[index] = true;
              $scope.$apply();
              return true;
            }; 
            img.onerror = function() {
              return false;
            };
            img.src = image;     
        }*/

      }).error(function(data, status, headers, config) {
        alert("Failure: " + JSON.stringify({ data: data }));
      });

Menu.html:

<ion-side-menus>

  <ion-pane ion-side-menu-content>

    <ion-nav-bar class="bar-positive nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>

    </ion-nav-bar>

    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>

  </ion-pane>

  <ion-side-menu side="left">

    <header class="bar bar-header bar-stable">
      <h1 class="title">Gallery</h1>
    </header>

    <ion-content class="has-header">

     <ion-list>
            <div collection-repeat="image in imageResources">
                <ion-item>
                    <div><img ng-src="{{ image.url }}"></div>
                </ion-item>
            </div>
      </ion-list>       

    </ion-content>

  </ion-side-menu>

</ion-side-menus>

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'leaflet-directive', 'ngCordova', 'igTruncate','ngResource','ngRoute','cloudinary','photoAlbumServices','angularFileUpload'/*,'photoAlbumAnimations'*/,'appFilereader'/*S3UploadDirective' , 'S3UploadController'*/])

  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if(window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        window.cordova.plugins.Keyboard.disableScroll(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })

  .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider, $compileProvider, $locationProvider, $httpProvider) {

    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
    //$compileProvider.imgSrcSanitizationWhitelist(/\/http://|..\/\b/);

    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];

    $ionicConfigProvider.tabs.position('bottom');


    $stateProvider

      .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'MapController'
      })

      .state('app.map', {
        url: "/map",
        views: {
          'menuContent' :{
            templateUrl: "templates/map.html"
          }
        }
      })

      .state('app.uploadPicture', {
        url: "/uploadPicture",
        views: {
          'menuContent' :{
            templateUrl: "templates/uploadPicture.html",
            controller: 'photoAlbumControllers'
          }
        }
      })


      .state('app.search', {
        url: "/search",
        views: {
          'menuContent' :{
            templateUrl: "templates/search.html",
            controller: 'SearchController'
          }
        }
      })      

      .state('app.marker', {
        url: "/addmarker",
        views: {
          'menuContent' :{
            templateUrl: "templates/addMarker.html",
            controller: 'MarkerController'
          }
        }
      })           

      .state('app.camera', {
        url: "/camera",
        views: {
          'app-camera' :{
            templateUrl: "templates/camera.html",
            controller: 'ImageController'
          }
        }
      })



    $urlRouterProvider.otherwise('/app/map');

  });

Output: Output

My Side Menu didnt not display my images data. I have already included the MapController.js in my index.html

Please assist me in giving the working example. Thanks.

Kyros Koh
  • 188
  • 2
  • 12

0 Answers0