Question

使用AngularJS遇到令人沮丧的问题。我尝试做的就是加载一个json文件并使用ng：repeat将其显示在模板中。我过去没有遇到任何问题，但出于某种原因，下面的代码不起作用。有人可以看看并告诉我我错过了什么吗？

如果你看一下模板：

palette.html

{{palette}}

<div ng-repeat="for color in palette">{{color}}</div>

{{palette}}输出[{"hex":"#6e4516"},{"hex":"#DDDABE"},{"hex":"#ECEAD9"},{"hex":"#98A349"},{"hex":"#798616"}]但ng：repeat不显示任何内容。所以json被加载到范围内但由于某种原因我无法循环它。

这是我的主要js文件：

app.js

var App = angular.module('App', []).
    config(function($routeProvider)
    {
        $routeProvider.
            when('/palette', {templateUrl:'templates/palette.html', controller:PaletteController}).
            otherwise({redirectTo:'/home'})
    });

function PaletteController($scope, $http){
    $http.get('palette.json').success(function(palette){
        $scope.palette = palette;
    });
}

和从json文件加载的数据：

palette.json

[
    {"hex": "#6e4516"},
    {"hex": "#DDDABE"},
    {"hex": "#ECEAD9"},
    {"hex": "#98A349"},
    {"hex": "#798616"}
]

Answer 1

您在ng-repeat的表达式部分中的代码不正确。你需要这样的东西：

<div ng-repeat="color in palette">{{color.hex}}</div>

无法在AngularJS模板中循环遍历数组

1 个答案: