如何在一页上动态插入数组中的项目

Question

我希望将templateUrl的页面route指向wizard.html页面。要将固定项目过滤到其各自的页面，例如，我使用：| filterBy: ['href']:'/sound-waves'。如何动态地在一个页面上插入项目？

angular.module('tareasApp') 
    .controller('NatureCtrl', function ($scope, $routeParams, $sce, $location, $anchorScroll) { 
    $scope.items =[ 
    {  
      href:'/sound-waves', 
      img:'waves.jpg', 
      video:'//www.youtube.com/watch?v=OG2eGVt6v2o', 
      description:'Those Relaxing Sounds of Waves' 
    }, 
    {  
      href:'/nature-relaxing-sound', 
      img:'ocean.jpg', 
      video:'//www.youtube.com/watch?v=SWR0GdC7_40', 
      description:'Nature Sounds Relaxing Ocean Sounds' 
    } 
    ]; 
}); 

页wizard.html

<div ng-controller="NatureCtrl"> 
<div ng-repeat="item in items | filterBy: ['href']: ''" > 

    <img ng-src="images/{{ item.img }}" width="400" height="200" > 

    <p>{{item.description}}</p> 

    <iframe width="655" height="400" ng-src="{{ item.video }}" frameborder="0" allowfullscreen></iframe> 
</div> 
</div> 

路线

angular.module('tareasApp') 
    .config(function ($routeProvider, $locationProvider) { 
    $locationProvider.html5Mode(true); 
    $routeProvider 

     .when('/sound-waves', { 
     templateUrl: 'views/wizard.html', 
     controller: 'NatureCtrl' 
     }) 
     .when('/nature-relaxing-sound', { 
     templateUrl: 'views/wizard.html', 
     controller: 'NatureCtrl' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     });  
    }); 

的目标是避免具有相同的结构的多个页面。

编辑：页面的名称不是按顺序排列，所以不是。我已经让它更容易理解。 （写为：头版，页二改为声波产生，自然放松的声音）

编辑：把...controller('NatureCtrl', function...涉及项目阵列更好的理解。

Answer 1

你说得对，为每个URL创建一个路由是错误的路要走，这就是为什么$routeProvider支持路由参数。

您可以定义您的路线如下：

$routeProvider 
    .when("/:pageName", { 
    templateUrl: "views/wizard.html", 
    controller: "NatureCtrl" 
    }); 

和pageName将作为一个$routeParam.pageName：

.controller("NatureCtrl", function($scope, $routeParams){ 

    // ... pageName could be: "sound-waves" or "nature-relaxing-sound" 
    $scope.pageName = $routeParams.pageName; 
}); 

如果项目是从一个服务来了，说ItemsService，你也可以使用resolve属性来获取项目，甚至在它们来自服务时对它们进行预过滤，作为控制器的可注入参数。以下是它的样子：

$routeProvider 
    .when("/:pageName", { 
    templateUrl: "views/wizard.html", 
    resolve: { 
     item: function(ItemService, $route){ 
      // $routeParams here would not yet have the params for this route 
      return ItemsService.getItemsForPage($route.current.params.pageName); 
     } 
    }, 
    controller: function($scope, item){ 
     $scope.itemForThePage = item; 
    } 
    })