Angular JS / PHP－ can read data from database but ng-click not working

Question

Now I can read the PictureName from database and show it on the browser. (Picture below: black block on the left)

And what I want to do is that, when do click on one of rows (ex: pic1), it will trigger function change().

But no matter what I try, function change() doesn't work. What should I do to my code? Thanks for the answers and suggestions. :)

read.php

<?php    
require 'lib.php';    
$object = new CRUD();

// table header
$data = '<table style="border-collapse:separate; border-spacing:0px 10px;">
            <tr>
                <th>No. </th>           
                <th>PictureName</th>
            </tr>';

// table body

$picturetb = $object->Read();

if (count($picturetb) > 0) {
    foreach ($picturetb as $key=>$picture) {
        $data .= '<tr ng-click="change()">
                <td>' . $key . '</td>
                <td><a>' . $picture['Picture_Name'] . '</a></td>            
            </tr>';
    }
}

$data .= '</table>';
echo $data;
?>

angular.js

var mainApp = angular.module("mainApp", []);
mainApp.controller('MyController', function ($scope) {

    $scope.readRecords = function () {
        $.get("ajax/read.php", {}, function (data, status) {            
            $(".addPicture").html(data);
        });
    }

    $scope.change = function () {
        console.log("do click");
    }
}

davidkonrad · Accepted Answer · 2018-09-25 14:14:10Z

2

Well you could use $compile but generally it is a very, very bad idea to inject markup this way. Why not return the key / picture as JSON:

$arr = [];
foreach ($picturetb as $key=>$picture) {
  $arr[] = array('key' => $key, 'picture' => $picture['Picture_Name']);
}
echo json_encode($arr);

Retrieve it like this

$scope.readRecords = function () {
  $.get("ajax/read.php", {}, function (data, status) {            
    $scope.data = data;
  });
}

In your view:

<table style="border-collapse:separate; border-spacing:0px 10px;">
  <thead>
    <tr>
      <th>No. </th>           
      <th>PictureName</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-click="change()" ng-repeat="d in data">
      <td> {{ d.key }} </td>
      <td><a> {{ d.picture }} </a></td>
    </tr>
  </tbody>
</table>

answered Sep 25, 2018 at 14:14

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

4 Comments

FJF Over a year ago

Thanks a lot. I have tried your suggestion. It produced the array correctly. (that I checked by /**console.log($scope.datadata); /) But now it only show <thead> in my view, and <tbody> show nothing. And I think / <tr ng-click="change()" ng-repeat="d in data"> */ here is also correct. I have no idea about why no show...

davidkonrad Over a year ago

Do you by any chance have forgotten to connect the controller with the markup? You should have the markup wrapped in <body ng-controller="MyController"> ... </body> or <div ng-controller="MyController"> ... </div> and place your <table> inside that <div> ...

FJF Over a year ago

I have used <ng-controller>. I think that $scope.data = data; is JSON object. So I use JSON.parse(data) to convert text into a JavaScript object. And it still show nothing.

FJF Over a year ago

Afterwards, I wrap the changes in the $scope.$apply function. and it work. So my problem is solved. Thanks!

ahsan ayub · Accepted Answer · 2018-09-25 14:44:53Z

0

You can still do it, if you insist on getting table from database. Here what you need to do.

-Run angular digest cycle again manually. After your table loading.

Below is the code:-

$timeout(function () { 
var injector = $('[ng-app]').injector();
var $compile = injector.get('$compile');
var $rootScope = injector.get('$rootScope');
$compile(this.$el)($rootScope);
$rootScope.$digest();
},0);

$timeout with time 0 will run digest cycle right.

But i'll personally suggest @davidkonrad answer.

answered Sep 25, 2018 at 14:44

ahsan ayub

3073 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular JS / PHP－ can read data from database but ng-click not working

read.php

angular.js

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

read.php

angular.js

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related