0

I have a large list of items. Each item has it's own details.

In my main view/partial, I simply display a large list list of the item names. When the user clicks on an item, I want the page to go to a partial which works as a "template", displaying information based on which list item is clicked, and hence possibly what the URL looks like. E.g. /listItem1/

This diagram below hopefully sums up what I want to achieve pretty clearly. enter image description here

How can I do this?

Right now, I have a pretty standard set up in which I have all the information for each list item in an array of object literals, which is contained in a controller injected into the main app module. Like so:

    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

I know how to create basic views/partials as well. But what would be my next steps?

Improve this question

2 Answers 2

Reset to default
1

You can do what you want, using the built-in router which ships with 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;
                }
            })
    });

Basically, what the above means, is that if you browse to pdf/item/1

Then you will have access in your controller to $routeParams.itemId which will be equal to 1. You can then do whatever logic is necessary with this information on your partial to show the information you want.

Hope this helps.

Update

Please look at the controller, this is how you would get the param you passed via the URL, you would then do whatever it is you need to do with that param in the controller, and pass the data back to the view.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Ah. By the way, the 'url' property in the object literals was actually just a detail of the object, not the path I want. So I'm guessing I would just write .when(':itemId',{...} ? Then how would I specify in my partial template to display the details of that specific list item?
Ah, I see. So if I am using ng-repeat to generate all my list items, does $routeParams allow me to access the properties for the specific list item clicked? So then I would write $routeParams.itemId.detail1 or perhaps $routeParams.detail1 if I wanted to displays those details?
$routeParams maps to whatever you used the colon operator for on your URL. So for example if you used /:itemId then your URL is /1 then $routeParams.itemId will == 1
Thank you. This worked, I ended up using multiple route params, such as /category/:categoryId/list/:listId. See here for anyone reading this that is interested: docs.angularjs.org/api/ngRoute.$routeParams In my $scope I actually had multiple array lists, and to determine which array list to search through with the acquired :itemID parameter, I used what was passed into the first $routeParam, :categoryID along with a rather large and clumsy if/else-if block. That is probably not the best way to do it, but not skilled enough to figure out how else to go about it.
Glad you found your solution, happy coding :)
1

You can create a small directive that will use the multi-use partial to display each item on the list

Take a look at this working example (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) {


      }
    };
  }])
Improve this answer

8 Comments

This looks great. I will look a detailed look into this and get back to you
Could you quickly explain for me the part item: '=' in the scope of the directive?
I just realised that I left that scope {} there. I was doing some other tests passing the item content via an attribute on the directive - that's what scope is meant to do. It's not being used on the code above and you can delete it.
Ah.. so if that scope is unnecessary, are there any parts of the code that are consequently also unnecessary? Like is name="{{ item.name }}" in the button necessary? Also, why is it that the attribute directive is named listItem, but the attribute of the last <div> I see in index.html is list-item? i.e. <div list-item item="selected"></div>? Also confused about the iAttrs parameter. Sorry, I'm still learning AngularJS. I think I understand the general flow of it, but could you help explain your code a bit more for me please?
Ooops! I take it back. It IS necessary: basically the scope {item: '='} set up bi-directional binding between a local scope (directive) property and the parent scope property (controller) of name defined via the value of the attr attribute item ($scope.selected).
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.