Question

我正在从Angular中的文件中读取JSON。该文件的内容是：

{
"mango":
[
{
  "id": 3,
  "image": "Mango1.jpg",
  "text": "I am mango 3"
},
{
  "id": 2,
  "image": "Mango2.jpg",
  "text": "I am mango 2"
}
]

}

我正在我的控制器中阅读：

    $.getJSON("../json/list.json", function (json) {
    $scope.mangoLists = json;

当我输出到控制台时，它会显示芒果对象等。但是我无法通过这样做将它们输出到用户界面：

    <div class="col-sm-6" ng-repeat="mango in mangoLists">
        {{mango.text}}
    </div>

请协助。

Answer 1

您需要使用$.getJSON调用$scope.$apply()之后更新控制器数据的视图，如下所示：

$.getJSON("../json/list.json", function (json) {
    $scope.mangoLists = json;
    $scope.$apply();
}

$scope.$apply()将触发一个摘要周期，用于更新视图。

Answer 2

你可以尝试如下，我认为你在ng-repeat中做错了我希望这会对你有所帮助

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

  <div class="col-sm-6" ng-repeat="mango1 in mangoLists.mango">
        {{mango1.text}}
    </div>
</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
   $scope.mangoLists = {
"mango":
[
{
  "id": 3,
  "image": "Mango1.jpg",
  "text": "I am mango 3"
},
{
  "id": 2,
  "image": "Mango2.jpg",
  "text": "I am mango 2"
}
]
}
});
</script>

</body>
</html>

＆＃13;

在Angular中循环通过json

2 个答案: