ngRepeat、JSON、angularJS-不允许重复-通过指令中的模板

更新：

我发现，如果我在控制器中传递JSON文件，如下所示：

controller('dynamicMenuCtrl', ['$scope', function ($scope) {
    $scope.mainmenu2 = [
            {
                "id": "bananas",
                "title": "Bananas",
                "href": "#/bananas",
                "li-class": "menu-element"
            },
            {
                "id": "apples",
                "title": "Apples",
                "li-class": "dropdown"
                "submenu": [
                    {
                        "id": "apple-lot",
                        "title": "Apples lots",
                        "href": "#/apples/lot"                  
                    },
                    {
                        "id": "apple-series",
                        "title": "Apples series",
                        "href": "#/apples/series"
                    }               
                ]
            },
            {
                "id": "cherries",
                "title": "Cherries",
                "href": "#/cherries",
                "li-class": "menu-element"
            }
        ]
        });

而不是通过$http.get 获取

我的导航栏工作正常。我在HTML中称之为：

<li ng-repeat=item in mainmenu2>"

更新2:如果你使用MVC应用程序，你必须在Web.config 中register JSON文件

<system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8"/>
    </staticContent>
</system.webServer>

那一切都会好起来的

我有个问题，我有一个JSON文件：

{
    "mainmenu": [
        {
            "id": "bananas",
            "title": "Bananas",
            "href": "#/bananas",
            "li-class": "menu-element"
        },
        {
            "id": "apples",
            "title": "Apples",
            "li-class": "dropdown"
            "submenu": [
                {
                    "id": "apple-lot",
                    "title": "Apples lots",
                    "href": "#/apples/lot"                  
                },
                {
                    "id": "apple-series",
                    "title": "Apples series",
                    "href": "#/apples/series"
                }               
            ]
        },
        {
            "id": "cherries",
            "title": "Cherries",
            "href": "#/cherries",
            "li-class": "menu-element"
        }
    ]
}

我想用这个JSON文件制作一个导航栏。我使用AngularJS来实现这一点(在这种情况下只允许使用Angular(。

我制作了一个控制器来获取这个JSON文件：

angular.module('dynamic-menu').controller('dynamicMenuCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('MenuItems.json').success(function (data) {
        $scope.mainmenu = data;
    });

然后我想在我的HTML:中制作一个导航栏

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="nav-bar" style="margin-bottom: 0.5%">"
        <div class="container-fluid">
            <div class="navbar-header">
                <span class="navbar-brand">TITLE</span>
            </div>
            <div class="collapse navbar-collapse">
                <span class="navbar-brand">
                    <ul class="nav navbar-nav">
                        <li ng-repeat="item in mainmenu">
                            <a href="{{item.href}}">{{item.title}}</a>
                        </li>
                    </ul> <!-- /.nav navbar-nav -->
                </span> <!-- /.navbar-brand -->
            </div> <!-- /.navbar-collapse-->
        </div> <!-- /.container-fluid-->
    </nav>

然后我得到一个错误错误：

[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in mainmenu, Duplicate key: string:<, Duplicate value: "<"

我尝试使用表达式trackby $index，但它没有以我想要的方式呈现。有很多东西的复制品，但我不知道出了什么问题。也许我的JSON文件或Controller中有问题？

编辑：你能看到并编辑这个plunkr吗http://plnkr.co/edit/U1xG2E4ys7SGz7WxBtvq?p=preview

它也不起作用，也许我写错了什么？我还在这篇文章中更正了我的JSON文件，以及错误表达式

第2版：如果我想通过指令制作HTML怎么办

angular.module('dynamic-menu').directive('menuTemplate', function () {
    return {
        restrict: 'E',
        template: "<nav class='"navbar navbar-inverse navbar-fixed-top'" role='"navigation'" id='"nav-bar'" style='"margin-bottom: 0.5%'">"
                        + "<div class='"container-fluid'">"
                            + "<div class='"navbar-header'">"
                                + "<span class='"navbar-brand'">TITLE</span>"
                            + "</div>"
                            + "<div class='"collapse navbar-collapse'">"
                                + "<span class='"navbar-brand'">"
                                        + "<ul class='"nav navbar-nav'">"
                                            + "<li ng-repeat='"item in mainmenu'">"
                                                + "<a href='"{{item.href}}'">{{item.title}}</a>"
                                            +"</li>"
                                        +"</ul> <!-- /.nav navbar-nav -->"
                                    +"</span> <!-- /.navbar-brand -->"
                                +"</div> <!-- /.navbar-collapse-->"
                            +"</div> <!-- /.container-fluid-->"
                        +"</nav>"
           };
}]);

第3版：我更新了我的plunkr，现在它正在工作：

http://plnkr.co/edit/U1xG2E4ys7SGz7WxBtvq?p=preview

我还创建了一个指令，它也起作用。我不知道为什么它在Plunkr中工作，但在我的项目中没有：(