Angularjs: Referencing an element in array of objects in templates

Question

I need to display three elements per row on a page, from data that I get as array, so would like ability to reference a specific element inside array.

I.e. if my array is bookList, I'd like to be able to get at 3rd element of bookList so I can pass it to a directive, for example. Don't see an easy way to do this.

[edit]

{{bookList[2]}}

Believe maybe you're approaching the problem wrong, but hard to say without any code. Should have the array defined on an object attached to the scope for the controller, then can have a currentPage variable there too and functions for increasing/decreasing the pages, also an array for the currently visible pages (which you can then bind to using ng-repeat on the html side). In the controller you handle updating that secondary array based on the current page and the original array. If they click one element and you want to pass it to something else, use ng-click="someFunc(item)" — shaunhusain
– shaunhusain, Commented Jun 28, 2013 at 18:43
Hmm, interesting. Added a simple code sample of what I am trying to get at. Quite possible it's a problem of misunderstanding how Angular is supposed to work, but it seems it would be useful to do this in some cases. — Jean Barmash
– Jean Barmash, Commented Jun 28, 2013 at 20:19
Check out string interpolation on the page here: docs.angularjs.org/guide/directive basically what you're doing should work as long as it's in the correct context (within an element that has the app and controller as it's ancestor and that has the scope with the bookList array) If you provide more code or make a plunkr or jsfiddle or something online I might be able to get it working. — shaunhusain
– shaunhusain, Commented Jun 28, 2013 at 20:26

John Mee · Accepted Answer · 2014-03-23 23:55:38Z

7

Elements of the list are accessible via an integer property thus:

{{bookList.0}} {{bookList.1}} {{bookList.2}} ...

edited Mar 23, 2014 at 23:55

answered Mar 23, 2014 at 23:38

John Mee

52.6k39 gold badges158 silver badges196 bronze badges

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

2 Comments

Elise Chant Over a year ago

and find the last in the array with {{ (bookList.0*1 - 1) + bookList.length*1 }}

armyofda12mnkeys Over a year ago

Hey @EliseChant, just curious what is the logic behind the 'last in the array' shortcut... like why multiply * 1. The way I interpret is getTheValueofFirstBook then multiply 1 (which doesnt make sense to me since the string value of the book is like 'Great Expectations') then subtract one from that value then add the value of the length of the array.

Krishna G Nair · Accepted Answer · 2016-04-06 05:39:52Z

0

From what I understood, if you have a scope variable 'bookList' which is an array containing some 'n' elements and you want to access the 2nd element directly in your template, then you can use {{bookList[1]}} to get it.

answered Apr 6, 2016 at 5:39

Krishna G Nair

2682 silver badges3 bronze badges

Collectives™ on Stack Overflow

Angularjs: Referencing an element in array of objects in templates

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related