AngularJS Загрузка изображения с PHP - PullRequest
0 голосов
/ 14 октября 2018

Я хочу загрузить список имен из базы данных SQL.Затем я хочу щелкнуть имя и загрузить соответствующее изображение.Первое изображение должно загружаться при загрузке страницы.Имена загружаются.Изображение не загружается, и ng-click не загружает изображение.Заставил подобный код работать с использованием JSON, но не смог заставить работать с использованием БД.Кошки это имя таблицы.ImagePath и CatName - это поля в БД.Новое в PHP.Спасибо.

<!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>

Вот код PHP

    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);

Ответы [ 3 ]

0 голосов
/ 14 октября 2018

PHP будет выполнен на стороне сервера и отобразит данные в виде массива json.В любом случае я обновлю свой ответ.

0 голосов
/ 15 октября 2018
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];**
            });
0 голосов
/ 14 октября 2018

Измените ваш скрипт контроллера, переместив selectCat за пределы обещания.Также назначьте ему область.

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]; }]);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...