【问题标题】：AngularJS / PHP － ng-repeat with getting array from php shows nothingAngularJS / PHP － ng-repeat with getting array from php 什么也没显示
【发布时间】：2018-09-26 06:17:08
【问题描述】：

我在使用 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' }
    ];

});

【问题讨论】：

它对我来说工作正常，你能创建一个小提琴并重现这个问题吗？

标签： javascript php angularjs

【解决方案1】：

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

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

您可以read 了解$scope.apply

【讨论】：

非常感谢！这解决了我的问题。我试过$scope.$apply(function () { });这个，它工作。