Showing the total number of duplicated items generated by using ng-repeat

I've been struggling to find a way to show the count of duplicate results when using the ng-repeat method. 

<label data-ng-repeat="x in projects | unique:'b' | orderBy:'b'" >
    <input
    id="x.b"
    type="checkbox"
    ng-click="toggleSelection(x.b)" 
    ng-checked="selectedRefs.indexOf(x.b) > -1" />
    {{x.b}} 
</label>

http://plnkr.co/edit/zhH07DSHcofTxjFiE1TG?p=preview

In the example from Plunker, the checkboxes go through each 'refs' and display a unique checkbox for each one. I am looking to include a count next to each checkbox to indicate how many times a specific 'ref' appears. For example:

123 appears twice so it would show as:

123 (2)

456 appears twice so it would show as:

456 (2)

654 appears thrice so it would show as:

654 (3)

987 appears once so it shows as:

987 (1)

Any suggestions would be greatly appreciated.

javascriptangularjsangularjs-ng-repeat

Answer №1

A function can be created to retrieve the count from the controller and display it in the view

$scope.getCount = function (i) {
    var iCount = iCount || 0;
    for (var j = 0; j < $scope.projects.length; j++) {
        if ($scope.projects[j].b == i) {
            iCount++;
        }
    }
    return iCount;
}

To use this function in the view, simply call it with the value you want to search: getCount(x.b)

<label data-ng-repeat="x in projects | unique:'b' | orderBy:'b'">
    <input id="x.b" type="checkbox" ng-click="toggleSelection(x.b)" ng-checked="selectedRefs.indexOf(x.b) > -1" />{{x.b}}({{getCount(x.b)}})
</label>

Check out the demo here: http://plnkr.co/edit/RZokiI3XeSMlZB4gi4bJ?p=info

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Develop a scrambled PHP webpage for a CAPTCHA system

I've implemented the cool-captcha feature in my registration form. Here's the code snippet that generates the Captcha image: <img src="captcha.php" id="captcha" /> However, there is an issue where anyone can easily access the "captcha.ph ...

phpjavascriptsecurity.htaccesscaptcha

Tips for monitoring the activities of a different user on a website

I am working on a project where I need to display all the activities of one user to another user on a web page. Essentially, the second user should be able to see everything that the first user is doing on their page. While I know it can be done using AJA ...

javascriptuser-interaction

Add a CSS class to an innerHTML element just a single time

I currently have 2 files available: data.php page.php The data.php file is responsible for fetching a row from a SQL database and sending it to the page.php file. Within the page.php file, there is a JavaScript script that receives this row through AJAX ...

javascriptphphtmlcssajax

The daily scripture quote from the ourmanna.com API may occasionally fail to appear

I've been trying to display the daily verse from ourmanna.com API using a combination of HTML and JS code, but I'm encountering an issue where the verse doesn't always show up. I'm not sure if this problem is on the side of their API or ...

javascripthtmlapi

conceal a division beneath a YouTube video frame upon clicking

I need to hide the 'div .blind' element when a YouTube video (inside 'div #player') is clicked. How can I achieve this? Here's an example: JS: ... var player; function onYouTubeIframeAPIReady() { player = new YT.Player('pl ...

javascripthtmlcssyoutube

cPanel is incompatible with node version 12.16.0

I am facing a dilemma regarding hosting my node API, which was built using node version 12.16.0, on cPanel. The available version for node in cPanel is 12.9.0 (Most recent). How should I proceed? Is the node version really a critical factor in this case? ...

javascriptnode.jsnpmservercpanel

Issue with pre-selected checkboxes: JavaScript

A function was created to automatically check the first value of a checkbox when a page is loaded: function defaultCheck(){ document.checkBoxForm.list[0].checked = true; var val=document.checkBoxForm.list[0].value; showtotal[0] = docum ...

phpjavascripthtmlajaxcheckbox

What is the way to retrieve an array property in a typescript interface?

Imagine a scenario with three interfaces structured as follows: registration-pivot.ts export interface RegistrationPivot { THead: RegistrationPivotRow; TBody: RegistrationPivotRow[]; } registration-pivot-row.ts export interface RegistrationPivotR ...

javascripthtmlcssangulartypescript

What seems to be the issue with my code for Javascript Math functions?

Welcome to the number game slider! If you roll above 50, you will get double the amount bet. Use the slider to choose your desired betting amount. Issue 1: After a win, the score does not update correctly. Instead of showing increments of 5, it displays s ...

javascripthtml

Dealing with the response from an AJAX post sent from an Express server: strategies and tips

As a beginner, I might not have been clear in my previous question. The issue I'm facing is that the response I receive from my express server is showing on the page, but I am unable to handle it on the client side using jQuery. On the server-side: r ...

javascriptjquerynode.jsajaxexpress

I am unable to utilize the backspace function within a text box generated by JavaScript

I have created a dynamic form using JavaScript that includes buttons and one text input field. However, the issue is that to delete the text entered in the input field, one must highlight the text and then type over it instead of being able to simply use t ...

javascripthtmlformsinput

Easy steps to prevent window.onbeforeunload from triggering when submitting a form using Vue

Presently, I am utilizing a component named countdowntimer.vue, specifically designed as a countdown timer for an online examination platform. My goal is to implement an onbeforeunload event on the window object while ensuring that the timer automatically ...

javascriptlaravelvue.jsvuejs2

Utilizing CSS, Javascript, and Jquery to Toggle a DIV's Visibility Based on Clicking Either of Two Images

Need help with showing and hiding divs based on image clicks. Have 2 images (Image_A and Image_B) and 2 hidden Divs (Div_A and Div_B). If Image_A is clicked, show Div_A. If Image_B is clicked, hide Div_A and show Div_B. This should work both ways, ensurin ...

javascriptjquerycss

Exploring Frontend Package Dependencies in Different Versions

As I develop the React frontend for a library package, I want to clearly display to users the specific version of the library being utilized. Apart from manual methods or relying on Node.js, I am unsure of alternative approaches to achieve this. I am curi ...

javascriptnpmpackage.json

Select the radio button that is hidden from view

There is a radio button with a hidden input that I can't see when inspecting the element. This is what I am encountering: https://i.stack.imgur.com/LnKnz.png Here is the HTML code snippet: <rhr-radio-button element-id="criterion-type" model="$ct ...

angularjsseleniumprotractorautomated-tests

Nuxt.js ERROR: Unable to find reference to 'window' object

Currently working with Nuxt.js and encountering an issue while configuring vuex-persist. Seeking assistance from someone familiar with this problem. store/index.js store/LangModule.js ...

javascriptvue.jsvuexnuxt.jspersistence

Managing UTC calculations with date-fns library in Node.js: A complete guide

Having some trouble with the date-fns library when trying to manipulate UTC dates. When attempting to add or subtract dates, it seems like the library isn't handling them correctly. An example: > const { add } = require('date-fns'); undef ...

javascriptnode.jsutcdate-fns

What are the steps to integrate DeviceOrientationControls with scrolling on iOS 13?

I am currently using DeviceOrientationEvents data to animate the rotation of a camera in three.js using DeviceOrientationControls. The controls are updated with each animation frame, and everything is functioning as expected. However, I have noticed that w ...

javascriptthree.jswebkitmobile-safarideviceorientationevent

Calculate and retrieve the result from the event handling function

I need to capture a returned value and store it in a variable within an event handler function. Below is a sample code snippet demonstrating this: var xhr = new XMLHttpRequest(); function getData(e) { if (xhr.readyState === 4) { if (xhr.s ...

javascriptajaxdom-events

Easily validating forms using javascript

I'm attempting to design a basic HTML form and would like to implement javascript for validating the input values. Below is the form tag: <form action="" onSubmit="return formValidation();" method="Post" name="form"> Here is a section of the ...

javascripthtmlforms