小编Abd*_*eeb的帖子

Angular ui路由器具有路由(状态)参数的多个视图

我有一个页面,我使用多个视图显示2个不同的产品列表,每个视图都有一个控制器和模板文件.我的州定义是这样的:

    .state('all_lists', {
      url: '/lists',
      views: {
      '' : {templateUrl: 'my-lists.html'},
      'featured@all_lists' : {templateUrl: 'featured.html', controller: 'featuredCtrl'},
      'deals@all_lists' : {templateUrl: 'deals.html', controller: 'dealsCtrl'}
      }
     }
    )
Run Code Online (Sandbox Code Playgroud)

每个单独的列表顶部都有分页和排序过滤器,这些分页和排序过滤器作为状态参数添加到URL中.请告诉我如何为状态视图定义这些参数,以便将它们添加到URL中,然后在各个控制器中使用.

如果您更好地了解如何使用添加到网址的分页参数显示此类产品列表,请分享您的想法.任何帮助将不胜感激.

谢谢

注意: 请注意,我需要在1页上显示这两个列表.它的主页和特色项目列表,然后在热门交易下面显示项目列表,这两个列表都有分页,排序和其他一些过滤器.URL将是这样的.mydomain.com/products/featured-page_1/deals-page_2/perpage_10/

注2: 在经过大量研究和调查后,我发现这是一个平行状态的明显案例.请告诉我如何使用我当前使用的URL参数方案实现并行状态.

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
  <body>
    <div id="content">
      <h1>Products Homepage</h1>
      <h3>Some common filters for both lists</h3>
    <div id="featured">
      <h2>Featured List</h2>
      <div>pagination and other filters</div>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
      </ul>
      </div>
      <div id="deals">
        <h2>Hot Deals List</h2>
      <div>pagination …
Run Code Online (Sandbox Code Playgroud)

multiple-views angularjs angular-ui-router

14
推荐指数
2
解决办法
867
查看次数

Angular JS ng-包含绑定问题

我使用模板文件创建了一个寻呼机小部件,我在HTML页面中使用了两次.我有一个选择转到页面选项以及上一页和下一页的链接.

问题是当我使用选择框更新当前页面时更新,然后我使用上一页和下一页链接,当前页面会更新,但选择框不会更新.

请告诉我我做错了什么.我的构建这样的寻呼机小部件的方法有什么逻辑错误吗?

控制器代码:

 var gallery = angular.module('gallery', []);
    gallery.controller('ItemListCtrl', ['$scope', function($scope){
      /*  Pagination Code */
    $scope.currentPage = 1;
    $scope.itemsPerPage = 24;
    $scope.total = 100;
    $scope.range = function(min, max, step){
      step = step || 1;
      var input = [];
      for (var i = min; i <= max; i += step) input.push(i);
      return input;
    };
    $scope.prevPage = function (){
      if($scope.currentPage > 1){
        $scope.currentPage--;
      }
    };
    $scope.nextPage = function (){
      if($scope.currentPage < $scope.pageCount()){
        $scope.currentPage++;
      }
    };
    $scope.pageCount = function (){
      return Math.ceil($scope.total …
Run Code Online (Sandbox Code Playgroud)

angularjs angular-template

6
推荐指数
1
解决办法
4388
查看次数