Question

更新

我发现如果我在控制器中传递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应用，则必须register JSON

中的Web.config文件

<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文件，以及错误表达式

EDIT2：如果我想通过指令制作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工作，但在我的项目中没有:(

Answer 1

您获得的数据是一个包含MongoCollection<Document> collection = db.getCollection("sample"); List<WriteModel<Document>> updates = Arrays.<WriteModel<Document>>asList( new UpdateOneModel<Document>( new Document(), // find part new Document("$set",1), // update part new UpdateOptions().upsert(true) // options like upsert ) ); BulkWriteResult bulkWriteResult = collection.bulkWrite(updates);键的对象，该键是对象数组。所以在你的控制器中使用：

mainmenu

此外，您的$http.get('MenuItems.json').success(function (data) { $scope.mainmenu = data.mainmenu; });数组包含一些不具有mainmenu和href值的对象，但它具有title属性（数组也属于），其中包含submenu和标题href。

使用此：

values

Answer 2

而不是这个

<span ng-repeat="motto in mottos"> {{motto}} </span>

尝试这样的事情

<span ng-repeat="motto in mottos track by $index"> {{motto}} </span>

您可以在this页面

上更详细地看到这一点

P.S。这是堆栈溢出问题的可能重复问题

Answer 3

您的代码中存在一些问题：

1）JSON无效。这是有效的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"
        }
    ]
}

2）$scope.mainmenu本身有一个mainmenu键，它是数组，因此在mainmenu键的ng-repeat中为：

 <li ng-repeat="item in mainmenu.mainmenu">

编辑：使用$http.get获取json。

请参阅plunkr：＆＃34; http://plnkr.co/edit/Kcl2uVeWg03bawagdQpm?p=preview＆＃34;

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

3 个答案: