Question

我有三个标签（文章，访客，订阅）和共同的分页;每个标签数据将提供分页。点击相应的标签;相应的ng-view即将出现，控制器正在正确响应。对于这个定制的分页;我想根据服务器响应（可用于下一个分页的页数）相应地更新<li>的数字。

<div ng-app="myLibrary">
    <ul>
        <li><a href="#/articleManager">Article(s)</a></li>
        <li><a href="#/visitorManager">Visitor(s)</a></li>
        <li><a href="#/subscriptionsManager">Subscription(s)</a></li>
        <li>
            <ul> //will behave as pagination toolbar and each <li> represents a page; after a minimum of 5 pages; i will add a combo(as in plan) to cater more page(s)
                <li ng-repeat="tPageObj in recordPageNumbers">
                    <span ng-click="fetchPage(tPageObj.pageIndex)">{{ tPageObj.pageIndex }}</span>
                </li>
            </ul>
        </li>
    </ul>
</div>
<div ng-view></div>

呈现视图时（从服务器获取数据后;我有一个带有$ scope（$ scope.recordPageNumbers）的数组并相应地计算页面。即使在控制台中;它显示适当的页数（s）;但我无法弄清楚为什么ng-repeat没有表现（因为我学到了这一点;在模型中进行双向绑定修改将触发视图更新）。

var myLibrary = angular.module('myLibrary', ['ngRoute', 'ngTable']);

    myLibrary.config(['$routeProvider', function($routeProvider) {  
        $routeProvider.when('/', 
            { templateUrl : 'angular-view/article.html', controller : 'articleList' } );
        $routeProvider.when('/articleManager', 
            { templateUrl : 'angular-view/article.html', controller : 'articleList' } );
        $routeProvider.when('/visitorManager', 
            { templateUrl : 'angular-view/visitor.html', controller : 'visitorList' } );
        $routeProvider.when('/subscriptionsManager', 
            { templateUrl : 'angular-view/subscriptions.html', controller : 'subscriptions' } );  
    }]);

    myLibrary.controller('articleList', function($scope, $http){
        $scope.articleListArray = [];
        $scope.recordPageNumbers = [];
        $http.get('ngMyLibrary.do?action=ALLARTICLE')
            .success(function(response) {
                $scope.articleListArray = response.data; //sending data to `ng-view`
                var totalPageCount = response.totalPageCount;//calculating pages and according creating the `recordPageNumbers` array.
                if(totalPageCount){
                    for(var counter = 1; counter <= totalPageCount; counter++)
                        $scope.recordPageNumbers.push({pageIndex : counter, disableButton : false});
                } else {
                    $scope.recordPageNumbers.push({pageIndex : 1, disableButton : true});
                }
                console.log($scope.recordPageNumbers); //console show as expected
            }
        );
    });

控制台：

[Object { pageIndex=1}, Object { pageIndex=2}, Object { pageIndex=3}, Object { pageIndex=4}, Object { pageIndex=5}, Object { pageIndex=6}]

我尝试使用{{ $index }}作为ng-repeat的循环索引，但它也可以正常工作。请帮忙。我是ng的新手;因此无法通过调试找出在ng-repat标签内检查的方法。

Answer 1

如果没有看到完整的项目结构，就有点难以理解。但是，您是否检查过控制器范围是否涵盖了您尝试使用的HTML？

例如，将第一行更新为

<div ng-app="myLibrary" ng-controller="articleList">

可能是你使用路由设置它的方式，控制器只负责将HTML注入到页面的ng-view部分。

在Angular JS中动态插入元素

1 个答案: