Display the count of ng-repeat items beyond its scope

Question

Display the count of ng-repeat items beyond its scope

Currently, I am looping through a list of nested JSON objects in this manner:

 <div ng-repeat='item in items'>
  <ul>
     <li ng-repeat='specific in item'>{{specific}}</li>
  </ul>
</div>

I want to display the number of 'specific' items in each object at the top of the page (outside of the ng-repeat scope). Using items.length is not an option since I need to count specific items individually. Unfortunately, I'm unsure how to extract and bind the data from the ng-repeat loop for use outside of its scope.

javascript angularjs

Answer 1

Answer №1

 <span>Total number of items:  {{countTotalItems(items.length)}}</span>

$scope.countTotalItems = function(items) {
     var totalCount = 0;
     for(var item in items) {
         for(var specific in item) {
             totalCount++;
         }
         // Instead of the second for loop, you can just write : 
         // totalCount = totalCount + item.length;
     }
     return totalCount;
};

This should work like a charm :)

Answer 2

 <span>Total number of items:  {{countTotalItems(items.length)}}</span>

$scope.countTotalItems = function(items) {
     var totalCount = 0;
     for(var item in items) {
         for(var specific in item) {
             totalCount++;
         }
         // Instead of the second for loop, you can just write : 
         // totalCount = totalCount + item.length;
     }
     return totalCount;
};

This should work like a charm :)

Display the count of ng-repeat items beyond its scope

Answer №1

Similar questions

I am experiencing an issue with my Angular directive where the button click does not

Is there an alternative method to handle the retrieval of JSON data without encountering numerous errors?

Experiment with jQuery and JavaScript compatibility specifically on Internet Explorer 6

Concealing the BrowserStack key within Karma

What is the best way to save a beloved pet for a user who is signed in?

How to upload a file with JavaScript without using Ajax technology

What is the best way to loop through an array inside an object stored within another array using *ngFor in Angular 2?

Obtain the count of unique key-value pairs represented in an object

Expanding Perspective in React Native

What is the method for selecting the element currently under the mouse cursor?

What is the best way to compare two strings without considering their capitalization?

Learn how to showcase the value of the selected radio button in AngularJS

Using Vue 3 to send formdata with axios

JavaScript Algorithm for Pyramids

Generate several invoices with just a single click using TypeScript

constructing a nested container using XMLHttpRequest

Unable to load connected modules from npm/yarn link within the WSL environment

The data binding does not function properly when using two nested ng-repeat directives

Adjusting Chart.js line graph alignment to the left

How to utilize a Jquery loop, implement a condition, and store the results in