javascript - ng重复不显示内容

标签 javascript angularjs

我遇到了一个基本问题,尽管我不明白为什么它不起作用:

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

还有我的 Angular :

$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 Controller 如下所示:

    //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;
}

最佳答案

您需要确定变量的范围才能从 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 调用中记录错误响应。

关于javascript - ng重复不显示内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53209448/

相关文章:

javascript - Jquery - 从下拉列表选择到上一个输入字段元素的值

javascript - 是否可以模糊或淡出 SVG 路径?

javascript - 在 Angular js中用字符串 "null"替换空数据

javascript - 使用 AngularJS 进行 PUT 的 CORS 请求无效

javascript - 检测用户是否从网页启用了 iOS 内容阻止

php - 将用户从文件输入中选择的文件路径存储为 session 变量,以便稍后重新填充该字段

javascript - React 应用程序显示空白页面

angularjs - Angular 1.3 中的哪些变化破坏了我的代码?

javascript - 使用单一模型编辑多个变量

javascript - AngularJS - 在自定义过滤器中获取对象索引