Question

我无法以最佳方式说出标题，我想要做的是使用ng-显示我在不同页面上存储在变量（$ scope.data）的不同索引中的数据路线。

我尝试使用分类列表作为示例在此处进行此操作（http://plnkr.co/edit/I3EEqC0aN79UUf10f7az）我已经设置了一些代码来模仿分类列表，抱歉没有样式。我可以在页面上显示第一页列表，但是当我使用我创建的按钮切换到另一个页面时，我会得到一个空白页面。

如果有人可以向我解释我做错了什么，在哪里，以及告诉我如何修复它我会非常感激。提前谢谢。

下面的Plnkr代码：

<!DOCTYPE html>
<html>
    <head>
        <title>L</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    </head>
    <body ng-app="LApp">



        <div class="main">
            <div class="container">
                <div ng-view></div>
            </div>
        </div>

        <!-- Modules -->
        <script src="app.js"></script>

        <!-- Controllers -->
        <script src="HomeController.js"></script>

    </body>
</html>

var app = angular.module("LApp", ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider
        .when("/L/:pageId", {
            controller: "HomeController",
            templateUrl: 'home.html'
        })
        .otherwise({
            redirectTo: "/L/0"
        });
});

<div class="row">
    <div class="col-md-12">
        <div class="page_select">
            <a href="#/L/{{ prevPageIndex }}"><button type="button" class="prev"><img src="#"></button></a>
            <p>{{ currentPageIndex }}</p>
            <a href="#/L/{{ nextPageIndex }}"><button type="button" class="next"><img src="#"></button></a>
        </div>
    </div>
</div>
<div class="row" ng-repeat="lst in listings[currentPageIndex].lsts">
    <a href="#">
        <div class="col-md-3">
            <img src="{{lst.thumbnail}}">
        </div>
        <div class="col-md-5">
            <h4 class="title">{{ lsts.title }}</h4>
            <p class="description">{{ lst.description }}</p>
        </div>
        <div class="col-md-1">
            <p class="author">{{ lst.author }}</p>
        </div>
        <div class="col-md-3">
            <h5 class='rating'>{{ lst.rating }}</h5>
        </div>
    </a>
</div>

我没有包含控制器，因为保存所有信息的变量非常大，而且占用了大量空间。

在不同的ngRoute页面上显示Controller内不同变量索引的数据。

0 个答案: