We Keep Coding

nested ng-repeat with json and rest api call back

I am trying to make a UI using list of product in a json(products.json) file on local and their availability in number from wp rest api call back in html(ionic) I have this:
Controller:
.controller('ShopCtrl', function($scope, $ionicActionSheet, BackendService, CartService, $http, $sce ) {
$scope.siteCategories = [];
$scope.cart = CartService.loadCart();
$scope.doRefresh = function(){
BackendService.getProducts()
.success(function(newItems) {
$scope.products = newItems;
console.log($scope.products);
})
.finally(function() {
// Stop the ion-refresher from spinning (not needed in this view)
$scope.$broadcast('scroll.refreshComplete');
});
};
$http.get("http://example.com/wp-json/wp/v2/categories/").then(
function(returnedData){
$scope.siteCategories = returnedData.data;
console.log($scope.siteCategories);
}, function(err){
console.log(err);
});
Template view:
<div ng-repeat = "product in products">
<div class="item item-image" style="position:relative;">
<img ng-src="{{product.image}}">
<div ng-repeat = "siteCategory in siteCategories">-->
<button class="button button-positive product-price" ng-click="addProduct(product)">
<p class="white-color product-price-price">post <b>{{siteCategory[$index].count}}</b></p>
</button>
</div>
</div>
<div class="item ui-gradient-deepblue">
<h2 class="title white-color sans-pro-light">{{product.title}} </h2>
</div>
<div class="item item-body">
{{product.description}}
</div>
</div>
so how can I achieve that? I tried to use nested ng-repeat but it didn't work out.

HTTP.GET isn't working

I'm trying to load a image from a HTTP.GET into my application. I'm unsure why the picture isn't loading.
Here is my code:
Html:
<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl">
<ion-content class="center" ng-init="getImages()">
<div class="item item-divider">
<i class="ion-images"></i> Under6/7/8/9s Photos
</div>
<a class="item item-list-detail">
<ion-scroll direction="x">
<img on-hold="onHold()" ng-repeat="image in images" ng-src="images" ng-click="showImages($index)" class="image-list-thumb" />
</ion-scroll>
</a>
</ion-content>
</ion-view>
Javascript:
.controller("photoCtrl", function($scope, $http) {
$scope.data = [];
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/1jovy')
.success(function(data) {
$scope.data = data;
})
}
});

Add your photoCtrl controller to your view
I saw ng-repeat="data in data", here item and collection is having same name, which is not a good practice....
If I am rewiting this as ng-repeat="img in data" then your ng-src will be like
ng-src="{{img}}"
updated CODEPEN

Angularjs issue $http.get not loading image

I'm trying to create an ionic application which uses a gallery. I'm unsure why my image isn't being loaded into the application.
What i'm trying to develop is an gallery which loads the images from a JSON file.
Here's my HTML
<ion-view view-title="Gallery" align-title="center">
<ion-content ng-controller="photoCtrl" ng-init="getImages()">
<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
<div class="col col-25" ng-if="$index < images.length">
<img ng-src="{{data.images[$index].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 1 < images.length">
<img ng-src="{{data.images[$index + 1].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 2 < images.length">
<img ng-src="{{data.images[$index + 2].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 3 < images.length">
<img ng-src="{{data.images[$index + 3].src}}" width="100%" />
</div>
</div>
</ion-content>
</ion-view>
Javascript:
.controller("photoCtrl", function($scope, $http) {
$scope.images = [];
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/30vuu')
.success(function(data) {
$scope.data = images;
})
}
});
I have also created a codepen: http://codepen.io/beefman/pen/eNMgzG

The JSON API return an associative array (key-value pair) like this:
{"images":"http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg"}
but your template code expects an array (list):
data.images[$index].src
so I would start by matching your JSON with the format expected by your template.
Edit: Here's a JSON format that would match your template's expectations:
{'images': [{'src': 'url1'}, {'src': 'url2'}]}
Also, make sure to set the images variable properly in your callback
$scope.images = data.images
now $scope.images is a list of key value pairs
with ng-repeat you can display the images like so:
<div ng-repeat="image in images">
<img ng-src="image.src" />
</div>

Your controller should be like this
.controller("photoCtrl", function($scope, $http) {
$scope.images = [];
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/30vuu')
.success(function(data) {
$scope.images = data;
})
}
});

Angularjs issue $http.get not working

I'm creating a mobile application using the framework ionic which is built on AngularJS.
I'm trying to load an image into my application from a JSON file but I cannot get it to load correctly.
Could anybody help me out?
Here's my HTML:
<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
<ion-content>
<div class="col col-25" ng-repeat="image in images">
<img ng-src="{{images}}" width="100%" />
</div>
</ion-content>
</ion-view>
Here's my javascript:
.controller("photoCtrl", function($scope, $http) {
$scope.data = [];
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/30vuu')
.success(function(data) {
$scope.data = data;
})
.error(function() {
alert("Not working");
});
};
});

There are several issues here. First, your API call returns an object with a single property called images (not an array). Second, you're not accessing it in your HTML because that would be {{ data.images }} since your $scope member is called data.
So, the first thing you need to do is have the API return an array. If you do that, then use this HTML:
<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
<ion-content>
<div class="col col-25" ng-repeat="image in data.images">
<img ng-src="{{image}}" width="100%" />
</div>
</ion-content>
</ion-view>
And this JavaScript:
.controller("photoCtrl", function($scope, $http) {
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/30vuu')
.success(function(data) {
$scope.data = data;
})
.error(function() {
alert("Not working");
});
};
});
If you only want your API to return one image then it's as simple as this for the HTML:
<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
<ion-content>
<div class="col col-25">
<img ng-src="{{ data.images }}" width="100%" />
<!-- data.images because that's the name returned by the API call -->
</div>
</ion-content>
</ion-view>
The JavaScript doesn't need to change from what I have above;

Please change
<img ng-src="{{image}}" width="100%" />
instead of
ng-src="{{images}}"

AngularJS and getting ng-click to work on dynamically loaded html

I wonder if i could get a little help here. I am trying to build a small image gallery using AngularJS and Laravel. So far everything is working out great. The problem I am having however is when I dynamically load one of my HTML files, the ng-click directive does not seem to work on the dynamic content. I have looked into this and came across the $compile option, but I cannot for the life of me see how I can implement it.
Any one have any idea of what I need to do? I have attached the code I am working with below:
Controller Code
App.controller('MyPhotos', function ($scope, $timeout, $http, $document, $modal, $log, $sce, $compile) {
$scope.loadAlbums = function () {
$scope.loading = "<div class='text-center'><strong>...Loading...</strong></div>";
$scope.isLoading = true;
$http({
method: 'GET',
url: '/my/photos/fetch/albums'
}).success(function (data) {
var htmlContent = $compile(data.albums)($scope);
$scope.galleryContent = $sce.trustAsHtml(data.albums);
$log.log(data.albums);
$scope.isLoading = false;
}).error(function (data, status, headers, config) {
//$scope.progress = data;
$scope.messages = 'There was a network error. Try again later.';
//$log.error(data);
$scope.isLoading = false;
});
};
Base Html Page
<div class="row">
<div class="col-md-12">
<ul class="list-inline">
<li>Your Photos</li>
<li>Your Albums</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div ng-show="isLoading" class="text-center">
<img src="{{ Theme::asset()->url('img/loading_balls.gif') }}" />
</div>
<div class="photoContainer" data-ng-bind-html="galleryContent">
[[ galleryContent ]]
</div>
</div>
</div>
Dynamically loaded HTML
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/700x400" alt="" class="img-responsive" />
<span class="fa fa-plus"></span> Create album
</div>
#foreach($albums as $album)
<div class="col-md-3">
<img src="http://placehold.it/700x400" alt="" class="img-responsive" />
<a href="#" data-ng-click="loadAlbum({{ $album->id }})" title="{!! $album->title !!}"
data-album-id="{{ $album->id }}">{!! $album->title !!}
</a>
<p> </p>
</div>
#endforeach
The data-ng-click directive is not working when the content is loaded dynamically.
Thanks

You can do this similarly in a much simpler way, using ngInclude:
<div class="photoContainer" ng-include="'/my/photos/fetch/albums'">
<img src="{{ Theme::asset()->url('img/loading_balls.gif') }}" />
</div>
See https://docs.angularjs.org/api/ng/directive/ngInclude