AngularJS / PHP －从php获取数组的ng-repeat没有显示任何内容

时间：2018-09-26 06:17:08

标签： javascript php angularjs

使用ng-repeat时遇到麻烦。

首先，我从数据库（ read.php ）获得一个JSON对象。并将其转换为javascript数组对象

var as = JSON.parse(data);
$scope.datadata = as;

我可以在控制台中很好地获得响应$scope.datadata，但在浏览器中什么也没有。因此，我使用了一个测试数组$scope.Picture_set，它可以正确显示在浏览器中。我该怎么做才能通过ng-repeat显示数据库项的代码？

read.php

<?php

require 'lib.php';
$object = new CRUD();
$picturetb = $object->Read();

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

?>

html

<body>
  <div ng-app="mainApp" ng-controller="drawbackController" class="container-fluid">    
      <div class="sidenav">                
          <table>
              <thead>
                  <tr>
                      <th>No. </th>
                      <th>PictureName</th>
                  </tr>
              </thead>
              <tbody>
                  <!-- fail -->
                  <tr ng-repeat="d in datadata">

                  <!-- success -->
                  <!-- <tr ng-repeat="d in Picture_set"> -->
                      <td> {{ d.key }} </td>
                      <td><a> {{ d.name }} </a></td>
                  </tr>
              </tbody>
          </table>

          <br>
          <div class="addPicture" id="addPicture"></div>
      </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script src="JS.js"></script>
  </div>
</body>

JS.js

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

    $scope.datadata =[];

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

            console.log(data);
            var as = JSON.parse(data);
            $scope.datadata = as;

            console.log($scope.Picture_set);
            console.log($scope.datadata);

            $(".addPicture").html($scope.datadata);
        });
    }
    $scope.readRecords();

    // a test array
    $scope.Picture_set = [
        { 'name': 'picture1' },
        { 'name': 'picture2' },
        { 'name': 'picture3' },
        { 'name': 'picture4' },
        { 'name': 'picture5' }
    ];

});

1 个答案:

答案 0 :(得分：1)

您正在使用jQuery的$.get而不是AngularJS的$http.get。因此，您的$scope不知道$.get回调中的更改。可以。

使用$http.get，然后$scope将自动检测更改
在当前代码中，将更改包装在$scope.apply()函数中

您可以read左右$scope.apply