AngularJS Image Load with PHP

Question

I'm wanting to load list of names from SQL DB. I then want to click the name and have corresponding image load. The first image should load when page loads. Names are loading. Image is not loading and ng-click does not load image. Made similar code work using JSON, but not able to make work using DB. Cats is the name of table. ImagePath and CatName are the fields in DB. New to PHP. Thank you.

<!doctype html>
<html>
    <head>
        <title>Load Images from DB</title>
        <script src="angular.min.js"></script>
    </head>

    <body ng-app='myapp'>

        <div ng-controller="userCtrl">


            <div ng-repeat="user in Cats">
                <h3 ng-click = "$scope.selectCat(cat)">{{user.CatName}}</h3>
            </div>

            <img  ng-src="{{$scope.selectedCat.ImagePath}}"/>

            <!-- Script -->
            <script>
                var fetch = angular.module('myapp', []);
                fetch.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {

                    $http({
                    method: 'get',
                    url: 'getData.php'
                    }).then(function successCallback(response) {
                        $scope.Cats = response.data;

                        $scope.selectCat=selectCat;

                         $scope.selectedCat=$scope.Cats[0];


                        function selectCat(pos) {
                           $scope.selectedCat = pos;

                        };
                    });
                }]);
            </script>
        </div>
    </body>
</html>

Here is PHP code

    include 'config.php';

    $sel = mysqli_query($con,"select * from Cats");
    $data = array();

    while ($row = mysqli_fetch_array($sel)) {
        $data[] = array("CatName"=>$row['CatName'],"ImagePath"=>$row['ImagePath']);
    }

    echo json_encode($data);

Othman Fayed · Accepted Answer · 2018-10-14 19:30:24Z

1

Change you controller script by moving the selectCat outside of promise. Also assign it scope.

fetch.controller('userCtrl', ['$scope', '$http',

function ($scope, $http) { 
$scope.selectCat = selectCat;
function selectCat(pos) { $scope.selectedCat = pos; }; }); 
}
$http({ method: 'get', url: 'getData.php' }).then(function successCallback(response) { $scope.Cats = response.data;  $scope.selectedCat=$scope.Cats[0]; }]);

edited Oct 14, 2018 at 19:30

answered Oct 14, 2018 at 6:46

Othman Fayed

1351 silver badge7 bronze badges

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

6 Comments

Ginger22 Over a year ago

The js controller would not recognize the PHP code. Anyway,PHP code is in separate file imported with 'get' method. Do you have a code snippet of how this would work?

Othman Fayed Over a year ago

The php will be executed server side and render the data as json array. Anyways i will update my answer.

Ginger22 Over a year ago

Thx for reply, but still getting same result. The names load, but not image.

Othman Fayed Over a year ago

Change cat to user such that <h3 ng-click = "$scope.selectCat(user)">{{user.CatName}}</h3> </div>

Ginger22 Over a year ago

Getting closer. Now I see place for image but image is empty. If I MOVE the image to the ng-repeat and display like <img ng-src ={{user.ImagePath}}/>, all of the images display. So something is not working with either <img ng-src="{{$scope.selectedCat.ImagePath}}"/> or $scope.selectedCat=$scope.Cats[0] from the controller. Thank you much for helping with this.

|

Othman Fayed · Accepted Answer · 2018-10-14 16:49:42Z

0

The php will be executed server side and render the data as json array. Anyways i will update my answer.

answered Oct 14, 2018 at 16:49

Othman Fayed

1351 silver badge7 bronze badges

Comments

Ginger22 · Accepted Answer · 2018-10-15 01:35:22Z

I finally got it to work by changing the HTML to: 

<div ng-controller = "MainController as **vm**">

  <div ng-repeat = "cat in Cats">

    <h3 ng-click = "vm.selectCat(cat)">{{cat.CatName}}</h3>

    </div>
    <hr>
<h3>{{vm.selectedCat.CatName}}</h3>
  <img ng-src="{{vm.selectedCat.ImagePath}}"</img>


I then changed the controller to : 

angular.module('myApp').controller('MainController', ['$scope','$http',function($scope,$http) {
**var vm = this;**

vm.selectCat=selectCat;

function selectCat(pos) {
  vm.selectedCat = pos;

};

$http({
            method: 'get',
            url: 'getData.php'
            }).then(function successCallback(response) {
                **$scope.Cats = response.data;
                vm.selectedCat=$scope.Cats[0];**
            });

Collectives™ on Stack Overflow

AngularJS Image Load with PHP

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related