0

我有一个很大的项目清单。每个项目都有它自己的细节。

在我的主视图/部分视图中，我只是显示了一个项目名称的大列表。当用户单击一个项目时，我希望页面转到作为“模板”工作的部分，根据单击的列表项显示信息，因此可能是 URL 的样子。例如/listItem1/

下面这张图希望能非常清楚地总结出我想要实现的目标。 在此处输入图像描述

我怎样才能做到这一点？

现在，我有一个非常标准的设置，其中包含对象文字数组中每个列表项的所有信息，该数组包含在注入主应用程序模块的控制器中。像这样：

    var app = angular.module('app', [/*nodependencies*/]);

    var controllers = {};

    app.controller(controllers);

    controllers.listController = function ($scope){ 
    $scope.list = [
            {name: 'List Item 1 Name',  detail1: 'blahblah1', detail2: 'blahblah2'},
{name: 'List Item 2 Name', detail1: 'blahblah1', detail2: 'blahblah2'},
{name: 'List Item 3 Name', detail1: 'blahblah1', detail2: 'blahblah2'}  
        ..... and so on

我也知道如何创建基本视图/部分。但是我的下一步是什么？

4

2 回答 2

1

您可以创建一个小指令，该指令将使用多用途部分显示列表中的每个项目

看看这个工作示例（http://plnkr.co/edit/0jNVxRg6g3p8uxpustzz?p=preview）

 var myApp = angular.module('myApp', []);

  myApp.controller('listController', ['$scope', function ($scope) {

    $scope.list = [
            {
              name: 'List Item 1 Name',  
              url: 'pdfs/item1.pdf', 
              detail: 'blahblah'
            },

      {
        name: 'List Item 2 Name',  
        url: 'pdfs/item2.pdf', 
        detail: 'blahblah'
      },

      {
        name: 'List Item 3 Name',  
        url: 'pdfs/item3.pdf', 
        detail: 'blahblah'
      }
    ];

    $scope.selectItem = function(item){

      $scope.selected = item;

     }

 }]);

  myApp.directive('listItem', [function () {
    return {
      restrict: 'A',
       scope: {
        item: '='
      },
      templateUrl: 'multiple-partial.html',
      link: function (scope, element, iAttrs) {


      }
    };
  }])
于 2013-10-06T03:16:23.337 回答
1

你可以做你想做的事，使用 AngularJS 附带的内置路由器。

var app = angular.module('app', [/*nodependencies*/])

    .config(function($routeProvider) {
        $routeProvider
            .when('/:itemId', {
                templateUrl: '/path/to/partial',
                controller : function($scope, $routeParams) {
                    $scope.item = $routeParams.itemId;
                }
            })
    });

基本上，上面的意思是，如果你浏览到 pdf/item/1

然后，您将可以在控制器中访问 $routeParams.itemId，该值将等于 1。然后，您可以对您的局部信息执行任何必要的逻辑，以显示您想要的信息。

希望这可以帮助。

更新

请查看控制器，这就是您如何获取通过 URL 传递的参数，然后您将在控制器中使用该参数执行您需要执行的任何操作，并将数据传递回视图。

于 2013-10-06T02:41:46.813 回答