Question

我是AngularJs的新手。我试图效仿W3CSchool，但遇到了问题。所以这是我的代码

我的HTML

<head>       
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26 /angular.min.js"></script>    
</head>

<body>
    <div ng-app="" ng-controller="estabController"> 
       <table>
         <tr ng-repeat="estab in item">
           <td>{{ estab.estabNome }}</td>
           <td>{{ estab.latitude }}</td>
           <td>{{ estab.longitude }}</td>
         </tr>
        </table>
     </div>
<script>
    function estabController($scope,$http){
        $http.get("http://192.168.1.6/projetos/campos/estabJson.php")
        .success(function(response){$scope.item = response;});
    }
</script>

我的Php文件

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '123456';
$dbname = 'websupor_campos';
$conn = new mysqli("$dbhost", "$dbuser", "$dbpass", "$dbname");
$result = $conn->query("SELECT estabNome, latitude, longitude FROM estabelecimento");

$outp = "[";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "[") {$outp .= ",";}
$outp .= '{"Nome":"'  . $rs["estabNome"] . '",';
$outp .= '"Latitude":"'   . $rs["latitude"]        . '",';
$outp .= '"Longitude":"'. $rs["longitude"]     . '"}'; 
}
 $outp .="]";

$conn->close();

echo($outp);
?>

在Firebug控制台中，我可以阅读200k的答案，然后阅读生成的json，例如

[{“Nome”：“Rancho SB”，“Latitude”：“ - 22.705875200595320”，“经度”：“ - 45.576378515405280”}，{“Nome”：“AcademiadeJud doJo o”，“纬度“：” - 22.744470000000000“，”经度“：” - 45.588863000000000“}，{”Nome“：”Academia de Balet da Vivian“，”纬度“：” - 22.740120044832324“，”经度“：” - 45.588667611639380“}， {“Nome”：“Academia Lua Nova”，“纬度”：“ - 22.732081200000000”，“经度”：“ - 45.563733000000010”}]

代码与w3C相同，但本地（我在Windows 8.1中使用xampp）无效。我错过了什么吗？

感谢所有人 MarcoAurélio/圣保罗 - 巴西

Answer 1

JSON中的属性名称为Nome，Latitude和Longitude，因此您需要使用这些：

 <tr ng-repeat="estab in item">
   <td>{{ estab.Nome }}</td>
   <td>{{ estab.Latitude }}</td>
   <td>{{ estab.Longitude }}</td>
 </tr>

我还强烈建议您找到一种方法来构建您的JSON，它不会涉及将少量字符串和数据库值组合在一起。这肯定会让你陷入一大堆问题。

Answer 2

dom在加载时无法访问您的数据。将数据分配到$ scope.item后，您需要使用$scope.$apply()

再次触发监视周期

$ scope.item不会在页面中将项目返回到ng-repeat

2 个答案: