ng重复不显示内容

时间:2018-11-08 14:09:16

标签: javascript angularjs

我有一个基本问题,尽管我不知道为什么不起作用:

<article id="desktop">
    <h3>Content: </h3>
    <ul>
        <li ng-repeat="x in storage">
            name: {{x.name}}
        </li>
    </ul>
</article>

还有我的角度:

$scope.storage = [];    
...

$scope.showDesktop = function(){        
$http.get("/getDesktop").then(function(response){
    for(var i = 0; i<response.data.length; i++){
        $scope.storage.push({
            name: response.data[i]
        });
    }
    console.log($scope.storage);
    return;
});        
}

必须存在语法错误,但我不知道它在哪里。 我看了一下文档并复制了ng-repeat语法,但仍然无法正常工作。

Console.log仅显示正确的内容。

我的Spring控制器看起来像:

    //Returns Desktop
@GetMapping("/getDesktop")
public ArrayList<String> getDesktop() throws Exception {
    ArrayList<String> itemNames = new ArrayList<>();

    if(kdxF.getLogged() && kdxF.getUser() != null) {
        itemNames = kdxF.showDesktop();
    }else {
        throw new Exception("Not logged in!");
    }   

    return itemNames;
}

1 个答案:

答案 0 :(得分:3)

您需要确定变量的范围,以便从html对其进行访问

var storage = []; //It is a private declaration and html has no access to it

使用$scope.storage = [];进行转换,然后ng-repeat将可以访问它。

也不要忘记在api中更改变量

$http.get("/getDesktop").then(function(response){
    for(var i = 0; i<response.data.length; i++){
        $scope.storage.push({
            name: response.data[i]
        });
    }
    console.log($scope.storage);
    return;
}, function (err){
    //log the error callback
    console.log(err);
});  

已编辑:一个可能的问题可能是由于ng-repeat跟踪序列引起的。为此,我们使用ng-repeat="x in storage track by $index"

请确保您在api调用中记录了错误响应。