AngularJs code snippet: Iterating over each element in the arrayValue using ng-repeat directive

Question

AngularJs code snippet: Iterating over each element in the arrayValue using ng-repeat directive

Here is an example of an array:

 var date = {
   '2015': [{
     'month': 'Januar',
     'day': 31
   }, {
     'month': 'Februar',
     'day': 28
   }]
 };

I am trying to use ng-repeat to iterate through the days:
Desired Output:

<div ng-repeat="date in date.2015">
  {{date.month}}
  <!-- Displays 12 month names -->
  <div ng-repeat="day in date['2015'+$index]['day']" >
    {{day}}
    <!-- displays the day count based on the month-->
    <!-- The day count should start from 0 and increment up to the specified number-->
  </div>
</div>

I hope this clarifies things.
The issue with

ng-repeat="day in date.2015+{{$index}}+'.day'"

has been fixed.

javascript angularjs

Answer 1

Answer №1

To start, you should create a helper function within your controller that transforms your number into an array with the same length as your day's value:

$scope.range = function(n) {
    return new Array(n);   
}

If you are working with the most recent versions of angular, make sure to explicitly set a variable in the repeat for aliasing purposes. Here is a functional fiddle using the provided code

<div ng-repeat="date in date.2015">
   {{date.month}} <!-- Shows 12 month names -->
   <div ng-repeat="day in range(date.day) track by $index">
        {{$index + 1}} <!-- displays the day 31, 30, or 28 times -->
        <!-- The day should also increment from 0 to the number -->
   </div>
</div>

Adjust the second ng-repeat to utilize the controller's function to obtain the index of the ng-repeat and remember to add 1 since it starts at 0. This Plunker demonstrates how to do this with older versions

<div ng-repeat="date in date.2015">
   {{date.month}} <!-- Shows 12 month names -->
   <div ng-repeat="day in range(date.day)">
        {{$index + 1}} <!-- displays the day 31, 30, or 28 times -->
        <!-- The day should also increment from 0 to the number -->
   </div>
</div>

Answer 2

To start, you should create a helper function within your controller that transforms your number into an array with the same length as your day's value:

$scope.range = function(n) {
    return new Array(n);   
}

If you are working with the most recent versions of angular, make sure to explicitly set a variable in the repeat for aliasing purposes. Here is a functional fiddle using the provided code

<div ng-repeat="date in date.2015">
   {{date.month}} <!-- Shows 12 month names -->
   <div ng-repeat="day in range(date.day) track by $index">
        {{$index + 1}} <!-- displays the day 31, 30, or 28 times -->
        <!-- The day should also increment from 0 to the number -->
   </div>
</div>

Adjust the second ng-repeat to utilize the controller's function to obtain the index of the ng-repeat and remember to add 1 since it starts at 0. This Plunker demonstrates how to do this with older versions

<div ng-repeat="date in date.2015">
   {{date.month}} <!-- Shows 12 month names -->
   <div ng-repeat="day in range(date.day)">
        {{$index + 1}} <!-- displays the day 31, 30, or 28 times -->
        <!-- The day should also increment from 0 to the number -->
   </div>
</div>

Answer 3

Answer №2

I believe I understand what you're trying to achieve. To iterate over the days, you can use the following code:

<div ng-repeat="date in date.2015">
   {{date.month}} <!-- Displays the month name -->
   <div ng-repeat="day in getDays(date.day)">
        {{day}} <!-- displays the day multiple times based on the number -->
        <!-- The day should also increment from 0 to the specified number -->
   </div>
</div>

To make this work, simply include this function in your controller:

$scope.getDays = function(num) {
    return new Array(num);   
}

Answer 4

I believe I understand what you're trying to achieve. To iterate over the days, you can use the following code:

<div ng-repeat="date in date.2015">
   {{date.month}} <!-- Displays the month name -->
   <div ng-repeat="day in getDays(date.day)">
        {{day}} <!-- displays the day multiple times based on the number -->
        <!-- The day should also increment from 0 to the specified number -->
   </div>
</div>

To make this work, simply include this function in your controller:

$scope.getDays = function(num) {
    return new Array(num);   
}

AngularJs code snippet: Iterating over each element in the arrayValue using ng-repeat directive

Answer №1

Answer №2

Similar questions

How can I determine the length of the returned array after a successful jQuery Ajax

Is the express.json() middleware for parsing JSON request body designed to handle synchronous calls?

Is there a way to show an alert indicating the location of the element that was clicked on the screen?

Query an array of objects for partial matches that are not case-sensitive, and then organize the results in alphabetical order

I am having difficulty accessing the dataset on my flashcard while working with React/Next JS

Retrieve specified elements from Bootstrap SelectPicker

Unable to call upon JavaScript code from an external file

What is the process for incorporating the 'url-regex' npm package into an Angular(2/4) project?

Tips for utilizing the async.js library in combination with the await keyword?

Combining AngularJS with Bridgeit.js for a seamless mobile web app experience

Issue with AJAX loading functionality not functioning properly in Internet Explorer

What is the best way to display a Bootstrap toggle?

Arrow function in JSX syntax within a render method

Is there a way to ensure my Vue variable is declared once the page has fully loaded?

Choose an option from the drop-down menu

What is the best way to download a modified canvas with filters using the solutions from stackoverflow?

Identify file size upon upload using Javascript event and allow cancellation

Show the error message from passport.js authentication in the user interface

Convert unusual characters that cannot be transmitted to the API using Node.js

Creating pagination in Vue using an array of objects