Angular and Laravel - fetch data from mysql

Question

I need to fetch data from my database, updated a div and onclick update another div.
I managed to fetch the data but I fail to load additional by onCLick.

My Code:

var app = angular.module('mainApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});

app.controller('mainController', function($scope, $http) {

$scope.fetcheddata = [];
$scope.loading = false;

$scope.init = function() {
    $scope.loading = true;
    $http.get('/api/content').
    success(function(data, status, headers, config) {
        $scope.fetcheddata = data;
            $scope.loading = false;

    });
}
$scope.getDesc = function() {
    $scope.loading = true;
    $http.get('/api/content/get/' + item.id).
    success(function(data, status, headers, config) {
        $scope.fetcheddata = data;
            $scope.loading = false;

    });
}

$scope.init();

});

View Code:

 <div class="col-xs-2 type-image" tr ng-repeat='item in fetcheddata'>
     <a href="#" class="thumbnail click-productgroup" data-group="show-<% item.group %>">
       <img src="<% item.image %>" class="img-responsive">
     </a>
  </div>

The -tag should fetch the item.description and update another div. How can I do that?
I tried with an getDesc scope. Is this right? But how do I updated the div?

EDIT 1:

                <div class="row">
                <div class="col-md-7" id="productGroups">
                        <div class="row type-row">

                            <div class="col-xs-2 type-image" ng-repeat='item in fetchedData'>
                                <a href="#" class="thumbnail" ng-click='getDesc(<% item.id %>)'>
                                    <img src="<% item.image %>" class="img-responsive">
                                </a>
                            </div>

                        </div>
                </div>
                <div class="col-md-5 type-description">
                    <% fetchedDesc | json %>
                </div>
            </div>

and in my controller:

$scope.getDesc = function() {
    $scope.loading = true;
    $http.get('/api/content/get/' + item.id).
    success(function(data, status, headers, config) {
        $scope.fetchedDesc = data.description;
            $scope.loading = false;

    });
}

Still the page jumps on click to the top and no content in the div (although ng-binding appears in the html).

you just have to place {{ item.description }} where you want to show it isnt it? — Vicky Gonsalves
– Vicky Gonsalves, Commented Sep 11, 2015 at 6:21
use, but I those are several items which are loaded in the ng-repeat. I need one description on click for a chosen item after the load. — Marek123
– Marek123, Commented Sep 11, 2015 at 6:24
Oh I see you want to show description on click of anchor tag? — Vicky Gonsalves
– Vicky Gonsalves, Commented Sep 11, 2015 at 6:26

James Flight · Accepted Answer · 2015-09-11 06:53:50Z

2

Firstly, the page is jumping because the href of your anchor tag is #, remove that to stop it from happening :).

Secondly, I think the best way of achieving what you're after would be to ensure that each item fetched from the server in the $http.get('/api/content') call has the description as a property, rather than fetching it seperately, and then do something like this:

$http.get('/api/content').
    success(function(data, status, headers, config) {
        $scope.items = data;
    });


$scope.selectItem = function(item) {
    $scope.selectedItem = item;
}

And in the view:

<div class="col-xs-2 type-image" tr ng-repeat='item in items'>
    <a href="" class="thumbnail click-productgroup" ng-click="selectItem(item)">
        <img src="{{ item.image }}" class="img-responsive">
    </a>
</div>
<div>
    {{ selectedItem.description }}
</div>

answered Sep 11, 2015 at 6:53

James Flight

1,4641 gold badge14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marek123 Over a year ago

this is it... I also accidentally added the <% tags to selectItem() - now it works! Thank you!

InfinitePrime · Accepted Answer · 2015-09-11 07:08:00Z

1

I notice that is your getDesc you don't pass item.id?

$scope.getDesc = function(item) {
 $http.get('/api/content/get/' + item.id)
   .then(function(data) {
      console.log(data)
   })
}

This should come from ng-click of the div tag?

 <div class="col-xs-2 type-image" tr ng-repeat='item in fetcheddata'>
     <a href="#" class="thumbnail click-productgroup" data-group="show-<% item.group %>" ng-click="getDesc(item)">
       <img src="<% item.image %>" class="img-responsive">
     </a>
  </div>

edited Sep 11, 2015 at 7:08

answered Sep 11, 2015 at 6:27

InfinitePrime

1,7761 gold badge15 silver badges19 bronze badges

1 Comment

Marek123 Over a year ago

I did that know. Still the page jumps and I the description div has ng-binding but now content.

Collectives™ on Stack Overflow

Angular and Laravel - fetch data from mysql

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related