0

I want to click on a link with id from database (on posts.html page) then view the full content of that post link in a display.html using AngularJS, MySQLi, and PHP. Please see the image below:

enter image description here

here is what I have managed to do so far: Posts.html

<table class="table table-bordered" ng-controller="postController"
       ng-init="show_data()">
    <tr>
        <th>Description</th>
    </tr>
    <tr ng-repeat="x in news">
        <td><a href="">{{x.description}}</a></td>
    </tr>
</table>

Here is my post controller: postController.js

"USE STRICT";
app.controller('postController', function ($scope, $http) {

    $scope.show_data = function () {
        $http.get("display.php")
            .success(function (data) {
                $scope.news = data;
            });
    }

});

And here is my display.php code:

<?php
    require_once "config.php";
    $output = array();
    $query  = "SELECT * FROM news";
    $result = mysqli_query($conn, $query);
    if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_array($result)) {
    $output[] = $row;
    }
    echo json_encode($output);
    }
    ?>

My display.html is:

<div >
    <div>{{id}}</div>
    <div>{{title}}</div>
    <div>{{article}}</div>
    <div>{{tag}}</div>
    <div>{{author}}</div>
</div>

How to display the results fetched from the database of the particular link on display.html?

georgeawg
  • 48,608
  • 13
  • 72
  • 95
gxvr
  • 296
  • 2
  • 17
  • Angular and mysqli are never meet. When it's mysqli, then it is mysqli and PHP. When it's Angular - then it's Angular and PHP. From the Angular's point of view, it doesn't matter where did PHP get that json. – Your Common Sense Oct 12 '19 at 13:27
  • The `.success` method has been [removed from the AngularJS framework](https://stackoverflow.com/questions/35329384/why-are-angularjs-http-success-error-methods-deprecated-removed-from-v1-6/35331339#35331339). – georgeawg Oct 12 '19 at 19:44
  • I am using angularjs 1.5 .8, .success and .error methods have been removed from AngularJS 1.6. Thanks for the info anyway @georgeawg – gxvr Oct 13 '19 at 07:57

1 Answers1

1

This should do the job:

In your config:

app
  .config(function ($routeProvider ...) {
    $routeProvider
      ...
      .when('/posts', {templateUrl: 'posts.html', controller: function($scope, $http) {
        $scope.getPosts = function() {
          $http.get('posts.php').then(function (response) {
            $scope.posts = response.data;
          });
        };
      }})

      .when('/display/:id', {templateUrl: 'display.html', controller: function($scope, $routeParams, $http) {
        $http.get('display.php', {id: $routeParams.id}).then(function (response) {
          $scope.post = response.data;
        });
      }})
    })

In posts.html:

<table class="table table-bordered" ng-controller="postController" ng-init="getPosts()">
  <tr>
    <th>Description</th>
  </tr>
  <tr ng-repeat="post in posts">
    <td><a ng-href="display/{{post.id}}">{{post.description}}</a></td>
  </tr>
</table>

In display.html:

<div ng-if="post">
  ...
  <div>{{post.title}}</div>
  ...
</div>

In display.php:

$id = $_GET['id'];
// then retrieve post by this id and return as json item
EurekA
  • 66
  • 6