Display an object's repeated values using ng-repeat without duplicating them in the output, and do so without relying on filters or external dependencies

My current situation involves these columns:

Column
   1     
   1         
   2   

What I am aiming for in the output is to avoid the repetition of the '1' values when using ng-repeat. This can be illustrated as follows:

Column  
   1      
   2   

Is there a method to detect and exclude repeated values during the iteration process of ng-repeat?

Below is my existing code snippet along with a working fiddle:

<div ng-app="myApp" ng-controller="myCtrl">
    <table>
        <tbody>
            <tr ng-repeat="item in obj">
                <td> {{ item.col1 }} </td>
            </tr>
        </tbody>
    </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.obj = [{ col1: 1}, { col1: 1}, { col1: 2}];
    });
</script>

EDIT: I am interested in exploring alternative solutions to address this issue without solely relying on a filter, as most responses in similar queries suggest using a filter.

Answer №1

If you need to display only unique values, there is a simple solution using the unique filter in ng-repeat in AngularJS.

AngularJS does not come with a built-in unique filter, but you can easily add one from angular-filter by including the JavaScript file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>

Add the dependency to your app like this:

var app = angular.module('myApp', ['angular.filter']);

Then simply use the | unique: filter in your ng-repeat to display unique values.

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

The datepicker in Vuetify is failing to display any dates

My date picker modal expands correctly, but the dates are not showing up. https://i.stack.imgur.com/azC1w.png The datepicker functions perfectly on the Codepen demo, displaying the dates as expected. However, when I try to implement the same code in my ap ...

Silly problem arising from the animate feature in jQuery

Apologies for my poor English. I am facing an issue with the animate function of jQuery in my code snippet. It seems to work fine at line 2, but it doesn't work at line 3. Can someone help me understand why? $('.opac').hover(function(){ ...

"Implementing a jQuery dialog box that sends JSON response to a different page rather than the current

Currently, I am working on an MVC application where I need to insert properties of certain objects. To achieve this, I have created a modal popup using jQuery dialog. In order to avoid any interference with other user actions, I have implemented an Ajax.Be ...

Uploading files using Ajax

Currently, I am attempting to utilize ajax for submitting a form that includes a file input. There are specific requirements that must be met in order for this process to work as intended. The file input should only be activated when a designated button ...

Update AngularJS from version 1.2.6 to Angular 16 in order to resolve the Material issue

Currently, I am working on a project that involves upgrading AngularJS version 1.2.6 to Angular 16. However, I have encountered a significant challenge in understanding the variances between AngularJS material and Angular material. For example, in Angular ...

The challenge of harmonizing variables in PHP and JavaScript

I have a PHP script that generates an HTML table displaying data from a MySQL database. <?php include 'connexion.php'; session_start(); $idfirm = $_REQUEST['idfirm']; $namefirm = $_REQUEST['namefirm']; The table rows are ...

Preventing window resize from affecting print screen content in Angular 8

I'm struggling with a print button feature in my Angular 8 project. When the window is resized, the content within the print window also resizes, which is not the behavior I want. I've tried a couple of solutions, but nothing has worked so far: 1 ...

Guide to ensuring modal box only appears once all criteria are satisfied

On my website, I have a form that requests the user's personal information. After filling out the form, a modal pops up with a "Thank you for signing up" message. The issue is that even if all fields are left blank and the button is clicked, the modal ...

Using AngularJS to create nested ng-repeat loops with conditional statements

Hey there, I'm facing an issue where multiple ng-repeat directives are nested like this: <form ng-repeat="pt in prolist"> Frequency <input type="checkbox" ng-model="pt.req" /> <div ng-repeat="disc in prolist"> ------ </d ...

Tips for adding animation to a React state value change triggered by an input

In my React application, I have a form with multiple fields that each contain a text input and a range input. Currently, both inputs share the same state value and onChange function to keep them synchronized. However, I would like to add an animation effe ...

The Json script in a Chrome extension will only execute the first time the URL is inputted

I've been working on developing a Chrome extension that utilizes CSS and HTML elements to block specific sections of the YouTube page. The problem I'm encountering is that the Json script only applies the CSS files correctly the first time I visi ...

Creating an interactive star rating system with JSON data

Currently, I am in the process of developing a star rating system specifically designed for restaurant reviews. The 'Attributes' displayed on the user interface are dynamic and fetched in JSON format. There exist five attributes with each having ...

Rearranging a collection of objects in JavaScript

Looking to rearrange an array of objects in JavaScript. The current array of objects is as follows: var myData = [ {"shift":"1","date":"01/01/2016/08/00/00","car":"178","truck":"255","bike":"317","moto":"237"}, {"shift":"2","date":"01/01/2016/17/00 ...

url-resettable form

Currently, I am working on an HTML form that includes selectable values. My goal is to have the page load a specific URL when a value is selected while also resetting the form back to its default state (highlighting the "selected" code). Individually, I c ...

Enhance the HTML content using a JavaScript function

Here is the code that I have: <label>Brand</label></br> <select name="brand" id="brand" onChange="changecat(this.value);"> <option value="" selected>Select Brand</option> <option value="A">AMD</option&g ...

How do I stop my sliding content from continuing after the first pass?

Welcome to my blog! If you take a moment to observe the "Audio" tile, you'll notice it moving. Suddenly, another tile labeled "cat" appears and slides in from the right, pushing "Audio" to the left. But here's where things get interesting - after ...

Enhancing Vue JSX functionality: Tips and strategies

When working with JSX in Vue, it requires creating a dedicated file, whereas in React, we can use it inline within JavaScript. Is there a way to achieve this in Vue? Contents of .babelrc : { "presets": [ "@babel/preset-react&quo ...

What would be the most effective method for storing an array in a Chrome extension?

The code in my background.js file is currently working as intended: var targetList = ["youtube.com", "vimeo.com"]; for (var i = 0, n = targetList.length; i < n; i++) { if (sender.tab.url.indexOf(targetList[i]) != -1) { // do something ...

How to divide a string by space after a specific character count using Javascript

I've been working on a tool that can divide input text into chunks based on a specific character count without breaking words in the process. Currently, I have set it to split the text after 155 characters. Even after conducting extensive research, ...

Obtain properties and methods from the parent Vue instance

I'm exploring ways to define some default props and functions in my Vue instance that I can use across all of my components. How do I achieve this? I attempted to pass the props, but since they are read-only it didn't work as expected. Am I on t ...