how can i increment an array in angular js?

Question

//this is my html and i want to know how to increment this so i can access the pdfs and display it.My problem is if i just call the course.pdfs the pdf's will be all the same so i want to add the [0] every time to display the pdf's differently on each modal, or if im wrong about the solution i hope you guys can help me what to do to display the pdfs differently.

  <div class="container1">

    <li ng-repeat="course in secondyear">Second Year: <br>
    <span ng-repeat = "subject in course.subjects"><br>{{subject}}<br>
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal"
    data-target="{{course.modal}}">Course Outline</button><br></span>
                 <div id="{{course.mod}}" class="modal fade" role="dialog">
                 <div class="modal-dialog">
                  <div class="modal-content">
        <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal">&times;    </button>
         <h4 class="modal-title">Course Description</h4>
        </div>

       <div class="modal-body">
 <iframe src="{{course.pdfs[0]}}" width="100%" height="600px" scrolling="auto"></iframe>

//here is my angular js

app.controller("courseCtrl", function($scope, firstyearFactory){
$scope.secondyear=[
    {
        name: '4',
        pdfs: ['a.pdf','b.pdf','c.pdf'],
        modal: '#modal1',
        mod:'modal1',
        subjects:['english','math','adverpub']


    }
        ];

// I can just do it like this but i have so many data which causes lag, it so laggy when i refresh it so i thought its lagging because i have so many keys or variable that i declared that's why i came up with displaying properties with just one object like(name:). By the way i have more than 20 keys thats why its lagging

 {year:'1st Year', 
         name: '1ENGLISH',
            pdfs: 'pdf/1st/1ENGLISH.pdf',
            modal: '#modal1',
            mod:'modal1'
        },
        {year:'1st Year', 
         name: '1SPEECH',
            pdfs: 'pdf/1st/1SPEECH.pdf',
            modal: '#modal2',
            mod:'modal2'    
        },

Shomz · Accepted Answer · 2015-08-22 13:26:39Z

2

You can use ng-repeat's $index variable to get another pdf in each iteration:

<iframe src="{{course.pdfs[$index]}}" width="100%" height="600px" scrolling="auto"></iframe>

Also, you might need to change what you're iterating over - it should probably be course in secondyear.pdfs and if you need to, you can add another ng-repeat inside the current one, just to build modals:

<li ng-repeat="course in secondyear">
  <div class="modal-body" ng-repeat="pdf in course.pdfs">
    <iframe src="{{pdf[$index]}}" width="100%" height="600px" scrolling="auto"></iframe>

answered Aug 22, 2015 at 13:26

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

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

1 Comment

user3079341 Over a year ago

sir its not working what is showing up is the files from my folder, then i tried clicking the pdf file the pdf shows up

Collectives™ on Stack Overflow

how can i increment an array in angular js?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related