Question

我正在制作一些有3个项目的菜单：NEW，HOT，RANDOM。我想为每个菜单项显示正确的内容。我想要显示的数据是硬编码的，因为我现在没有数据库。

以下是HTML代码的一部分：

<!-- BEGIN: Navigation -->
<md-content class="md-padding" style="margin:auto; width:750px;">
    <md-nav-bar md-no-ink-bar="disableInkBar" md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links"
                layout="row" layout-align="end start">
        <md-nav-item md-nav-click="goto('page1')" name="page1">
            NEW
        </md-nav-item>
        <md-nav-item md-nav-click="goto('page2')" name="page2">
            HOT
        </md-nav-item>
        <md-nav-item md-nav-click="goto('page3')" name="page3">
            RANDOM
        </md-nav-item>
    </md-nav-bar>
    <div class="ext-content" ng-switch="{{currentNavItem}}">
        <div ng-switch-when="page2">
            <div ng-repeat="post in hotPosts">
                <p>{{post}}</p>
            </div>
        </div>
        <div ng-switch-when="page3">
            <div ng-repeat="post in randomPosts">
                <p>{{post}}</p>
            </div>
        </div>
        <div ng-switch-default> <!-- HERE IS PARSING ERROR -->
            <div ng-repeat="post in newPosts">
                <p>{{post}}</p>
            </div>
        </div>
    </div>
</md-content>

然后是JavaScript代码的一部分：

angular.module("indexPageApp", ['ngMaterial'])
.controller("welcomeController", function($scope, $mdDialog) {
    //Resources
    $scope.newPosts = ["New post 1", "New post 2", "New post 3"];
    $scope.hotPosts = ["hot post 1", "hot post 2", "hot post 3"];
    $scope.randomPosts = ["ds fsfsdaf", "vag rege", "zcvx zver"];

    // Navigation
    $scope.currentNavItem = 'page1';
    $scope.goto = function(page){
        console.log("Goto " + page);
    };
});

我不知道为什么这段代码会抛出错误500.我花了很多时间。请帮忙。感谢。

Answer 1

我找到了解决方案。 JavaScript代码没问题。我只改变了这个：

<div class="ext-content" ng-switch="currentNavItem"> <!-- HERE removed braces -->
        <div ng-switch-when="page2">
            <div ng-repeat="post in hotPosts">
                <p>{{post}}</p>
            </div>
        </div>
        <div ng-switch-when="page3">
            <div ng-repeat="post in randomPosts">
                <p>{{post}}</p>
            </div>
        </div>
        <div ng-switch-default=""> <!-- HERE added blank quotas -->
            <div ng-repeat="post in newPosts">
                <p>{{post}}</p>
            </div>
        </div>
    </div>

如何在angularjs中使用ng-switch？

1 个答案: