Question

我有以下.json文件：

[
{
    "host": "host00",
    "avgcpu": "1%",
    "maxcpu": "2%",
    "freem": "32000"
},
{
    "host": "node01",
    "avgcpu": "33%",
    "maxcpu": "80%",
    "freem": "64000"
},
{
    "host": "node02",
    "avgcpu": "55%",
    "maxcpu": "75%",
    "freem": "100000"
},
{
    "host": "node03",
    "avgcpu": "85%",
    "maxcpu": "100%",
    "freem": "86674"
},
{
    "host": "node04",
    "avgcpu": "3%",
    "maxcpu": "7%",
    "freem": "86613"
}
]

我尝试使用以下控制器阅读它：

angular.module('usagemdl').controller('usagectrl', ['$scope', '$http', function ($scope, $http) {
$http.get('/out/usage.json')
    .then(function (response) {
        $scope.usages = response.usages;
    });
}]);

然后我尝试用以下html代码显示它：

<div class="cards" ng-controller="usagectrl">
        <div class="card" style="width: 18rem;" ng-repeat="usage in usages">
            <div class="card-header">
                {{ usage.host }}
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">{{ usage.avgcpu }}</li>
                <li class="list-group-item">{{ usage.maxcpu }}</li>
                <li class="list-group-item">{{ usage.freem }}</li>
            </ul>
        </div>
    </div>

ng-app是在我的<body>中定义的，可以在其他情况下正常工作。

我不确定自己在做什么错。我可以看到一秒钟的空卡，但随后消失了。

如果您需要任何其他代码来查找问题，请告诉我。

Answer 1

我这个你应该做那个。您缺少响应中的数据。

angular.module('usagemdl').controller('usagectrl', ['$scope', '$http', function ($scope, $http) {
$http.get('/out/usage.json')
    .then(function (response) {
        $scope.usages = response.data;
        console.log($scope.usages);
    });
}]);

ng-repeat数据闪烁然后消失

1 个答案: