Question

我想显示从数据库到页面的数据。我正在使用工厂服务，我在萤火虫中看到了json 这是我的代码：

Html

<div ng-controller="fruitsController">
    <ul>
        <li ng-repeat="fruit in fruits">
            {{fruit.subject}}
        </li>
    </ul>
</div>

Js

var fruitsApp = angular.module('fruitsApp', [])

fruitsApp.factory('fruitsFactory', function($http) {
    return {
        getFruitsAsync: function(callback) {
            $http.get('insert.php').then(
                function(response){
                    var store = [];
                    store = response.data;
                },
                function(error){
                    console.log(error);
                });

        }
    };
});

fruitsApp.controller('fruitsController', function($scope, fruitsFactory) {
    fruitsFactory.getFruitsAsync(function(results) {
        console.log('fruitsController async returned value');
        $scope.fruits = results.fruits;
    });
});

这是 insert.php

include('config.php');


$data = json_decode(file_get_contents("php://input"));
$subject = mysql_real_escape_string($data->subject);
$body = mysql_real_escape_string($data->body);
mysql_select_db("angular") or die(mysql_error());
mysql_query("INSERT INTO story (subject,body) VALUES ('$subject', '$body')");
Print "Your information has been successfully added to the database.";

$query = "SELECT * FROM story";
$result = mysql_query($query);

$arr = array();
while ($row = mysql_fetch_array($result)) {
    $subject = $row['subject'];
    $body = $row['body'];
    $arr[] = $row;
}
echo json_encode($arr);

json

<b>Notice</b>:  Trying to get property of non-object in <b>D:\xampp\htdocs\Angular\factory\insert.php</b> on line <b>14</b><br />
Your information has been successfully added to the database.[{"0":"","subject":"","1":"","body":""},{"0":"","subject":"","1":"","body":""},{"0":"Soheil","subject":"Soheil","1":"Sadeghbayan","body":"Sadeghbayan"},{"0":"adsas","subject":"adsas","1":"asdasdasda","body":"asdasdasda"},{"0":"Say","subject":"Say","1":"Something","body":"Something"},{"0":"asd","subject":"asd","1":"asdasdasd","body":"asdasdasd"},{"0":"asda","subject":"asda","1":"dasdasd","body":"dasdasd"},{"0":"asd","subject":"asd","1":"asdadd","body":"asdadd"},{"0":"asaS","subject":"asaS","1":"saAS","body":"saAS"},{"0":"adasda","subject":"adasda","1":"dasdasdasdasdasdasd","body":"dasdasdasdasdasdasd"},{"0":"AS","subject":"AS","1":"sASasAS","body":"sASasAS"},{"0":"asd","subject":"asd","1":"asdasd","body":"asdasd"},{"0":"xZ","subject":"xZ","1":"zXzXZX","body":"zXzXZX"},{"0":"weqe","subject":"weqe","1":"qeqeqe","body":"qeqeqe"},{"0":"gf","subject":"gf","1":"kjh","body":"kjh"},{"0":"","subject":"","1":"","body":""},{"0":"","subject":"","1":"","body":""},{"0":"","subject":"","1":"","body":""},{"0":"","subject":"","1":"","body":""}]

我在此代码中缺少什么来显示数据？ thx提前

Answer 1

我认为你的控制器也需要一个承诺：

fruitsApp.controller('fruitsController', function($scope, fruitsFactory) {
    fruitsFactory.getFruitsAsync().then(
        function(results) {
            console.log('fruitsController async returned value');
            $scope.foo = {};
            $scope.foo.fruits = results;
        }
    );
});

编辑：注意上述变化。此外，您需要更改html中的用法 - 它不再仅仅是˘fruits˘而是foo.fruits。试试吧。我想你正在使用ng-repeat迭代这些项目，对吗？

Answer 2

您没有从$ http。

返回值

IMO，更好的设置方式，因为$ http会返回一个承诺。

fruitsApp.factory('fruitsFactory', function($http) {
    return {
        getFruitsAsync: function() {
            return $http.get('insert.php');
        }
    };
});

fruitsApp.controller('fruitsController', function($scope, fruitsFactory) {
    fruitsFactory.getFruitsAsync()
      .then(function (response) { // Leveraging the .then from $http promise.
          $scope.fruits = response.data.fruits;
      });
});

根据您的JSON添加进行了更新：

您的JSON看起来不像有效的JSON。

{
    "fruits": [
        {"0":"","subject":"","1":"","body":""},
        {"0":"","subject":"","1":"","body":""},
        {"0":"","subject":"Soheil","1":"Sadeghbayan","body":"Sadeghbayan"}
    ]
}

更有意义的是，水果中的水果最终成为你的水果中的每个对象（模型）。

Answer 3

我就是这样做的：

var fruitsApp = angular.module('fruitsApp', [])

fruitsApp.factory('fruitsFactory', function($http) {
    return {
        getFruitsAsync: function(callback) { return $http.get('insert.php'); }
    };
});

这样你的工厂就真的回来了。

fruitsApp.controller('fruitsController', [ 'fruitsFactory', function($scope, fruitsFactory) {
    fruitsFactory.getFruitsAsync().success( function(results) {
        console.log('fruitsController async returned value');
        $scope.fruits = results.fruits;
    });
}]);

然后在您的控制器中，您可以根据需要处理数据响应。在您的情况下，您需要设置$scope变量以用于角度的双向数据绑定。

Answer 4

尝试在php文件中使用$arr [] = array();。

使用工厂在AngularJS中显示数据

4 个答案: