javascript - 无法在 AngularJS 模板中循环数组

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>