Javascript 如何在一个页面上动态插入数组中的项

我想将

templateUrl

、en

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'
     }
    ];  
 });

页面向导.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>

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

---

已编辑：页面名称不按顺序排列，因此没有。我已经把它放在更容易理解的地方了。（写为：第一页，第二页改为声波，自然放松的声音）

---

编辑：将涉及项目数组的

…控制器（'NatureCtrl'，函数…

放入，以便更好地理解。

您是对的，为每个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;
     }
  })

---

页面名称不按顺序排列，所以没有。我把它放在更容易理解的地方，就像设置路由一样？路由参数优化更实用，只是我在每个路由上都有一个标题，现在不知道如何设置页面标题。@ThiagoJem，好吧……一次一个问题。如果这解决了您原来的问题，您就必须换一个新的，问一个不同的问题。这将给我一个机会去思考“解决”的潜在方法。我仍然不明白“解决”需要哪些参数到路由？我的应用程序中的项目来自控制器中的数组。

resolve

只是一个额外的想法。

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;
     }
  })