Encountering an issue when utilizing ng-repeat to iterate through an array in JavaScript

I'm encountering an issue in my code that I can't seem to resolve.

<div ng-model="activeFilterCtrl.selectedfilters" ng-repeat="filters in activeFilterCtrl.selectedfilters" ng-model-options="{trackBy: '$value.params'}" flex>
      <md-button name="mylabel" ng-click="activeFilterCtrl.clearvalue()">{{filters.params}}</md-button>
</div>

Every time I run the code, I encounter the following error:

 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: filters in activeFilterCtrl.selectedfilters, Duplicate key: string:a, Duplicate value: a

I need a solution for this issue. Below is the current value of selected filter:

selected filter value is [{"params":"min","value":5}, {"params":"max","value":30}]
javascriptangularjs

Answer №1

give this a shot

 ng-repeat="filters in activeFilterCtrl.selectedfilters track by $index"

Answer №2

Take a look at this Demo Link

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11707f76645d70633f7b6251203f253f69">[email protected]</a>"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker" ng-controller="MainCtrl as activeFilterCtrl">
  <div ng-model="activeFilterCtrl.selectedfilters" ng-repeat="filters in activeFilterCtrl.selectedfilters" ng-model-options="{trackBy: '$value.params'}" flex>
      <md-button name="mylabel" ng-click="activeFilterCtrl.clearvalue()">{{filters.params}}</md-button>
</div>
  </body>

</html>

JS

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

app.controller('MainCtrl', function($scope) {
  var vm = this;

  vm.selectedfilters = [{"params":"min","value":5}, {"params":"max","value":30}]
});

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

How can I export an array in Ajax/PHP to the user as a .txt file?

Currently, I am working on a PHP file named "php-1" that is responsible for generating an HTML page. This particular file requests input from the user and once the user clicks on a button labelled "getIDs" (it's worth noting that there are multiple b ...

javascriptphpajaxarrays

I can't seem to figure out why the game is not showing up on the desktop in this index HTML

I have come across a game online and I am trying to run it from my desktop. Do I need to do anything special with the URLs or images to ensure that the file recognizes where everything is located? I have all the files and .png images in one folder at the s ...

javascriptcanvas

JavaScript execution triggers DOM repaint in Chrome

For my upcoming course catered towards beginners with no programming experience, I want to demonstrate basic DOM-manipulation without involving async programming or callback functions. I came up with the following idea: function color(element, color) { ...

javascriptgoogle-chrome

Is there a way for my directive to prevent drag action when the dragleave event is triggered?

To enhance the manual sorting process of nested ngRepeats, I have implemented three directives: draggable, droppable, and drop boundary. The draggable and droppable directives are functioning correctly, utilizing event listeners to facilitate drag and dro ...

javascriptangularjsdrag-and-dropevent-handling

Challenges encountered when interacting with a checkbox using Puppeteer

I've been encountering difficulties while trying to click on a checkbox during the checkout process on Footlocker Au's website. Despite searching online and attempting to use selector and xpath methods, I have not been successful. https://i.ssta ...

javascriptnode.jsnpmpuppeteer

Issue with Vue plugin syntax causing component not to load

I'm facing an issue with a Vue plugin that I have. The code for the plugin is as follows: import _Vue from "vue"; import particles from "./Particles.vue"; const VueParticles = (Vue: typeof _Vue, options: unknown) => { _Vue. ...

javascripttypescriptvue.jsvuejs2

Error: controller undefined

As I delve into a Coursera course on AngularJS, I've encountered a perplexing issue with a controller. The console is indicating that it is not defined. Upon running it through the https://validator.w3.org/, a recurring error message mentioning that ...

javascripthtmlangularjserror-handling

Switch up the position of the vertex shader in Three.js/webgl

I've been working on a particle system using three.js that involves using regular JavaScript loops to change particle positions, but I've found that this method is quite slow. Due to this performance issue, I've decided to delve into transf ...

javascriptopengl-esthree.jsparticle-system

Utilizing Vue.js to display dynamic data within a template using components

Using the egoist/vue-html plugin to render HTML works perfectly with standard HTML content, but encounters issues when trying to include a component tag. When attempting to add the Breadcrumb component in the template, it fails to work. Can anyone pinpoin ...

javascriptvue.js

What is the reason for the variable being limited to the template when passed through onLoad in ng-include?

I need help understanding how angular scope functions!!! I am passing two variables to a single template using ng-init and onLoad. Both variable values are accessible from the template, but there is only one controller bound to that template. I am wonderi ...

angularjs

Numerous Items

I have a strange object that I would like to transform into an object containing multiple nested objects. The current object has the following structure: { 'test.txt': "This is a test\r\n\r\nI hope it'll work", &apo ...

javascriptnode.jsjsonobjectnpm

highcharts-ng expands in flexbox without contracting

I've encountered an issue while trying to incorporate a highchart within a flexbox container. The chart expands along with the container without any problems, but it fails to contract when the container size decreases. My current setup involves angul ...

cssangularjshighchartsflexboxhighcharts-ng

Leveraging Material-UI: Utilize props in useStyles method while employing Array.map()

After delving into the world of passing props to makeStyles in Material-UI, I stumbled upon this insightful answer. The solution presented involves passing props as a variable, which is quite useful. However, my aspiration is to extend this functionality t ...

javascriptreactjsmaterial-uibackground-image

Exporting JavaScript formatting in Netbeans is a breeze

Does anyone know how to preserve the formatting for JavaScript in Netbeans 8.1 when exporting? After clicking on the export button and expanding Formatting, I couldn't find any option specifically for JavaScript. I've thought about locating the ...

javascriptnetbeanscode-formatting

Troubleshooting Vue Single File Components Displaying Missing Styles

I'm currently attempting to incorporate styles into a vuejs single file component. I've successfully achieved this in a node app previously, but now I am working with a python/flask backend (not that it should make a difference). The Vue componen ...

javascriptvue.jswebpack

Achieving nested views functionality with various modules in AngularJS and ui-router

I am currently working on a complex AngularJS application with a large module that I am looking to break down into smaller, more manageable modules. Our main page consists of several ui-views for menu, footer, content, sidebar, etc. Each $stateProvider.st ...

angularjsangular-ui-router

"JS Kyle: Utilizing JWT for Signing and Encrypting Data

I am currently using jose for signing and encrypting JWTs, but I am facing an issue when trying to sign and then encrypt the entire JWT. When it comes to signing my JWT, I utilize the following function: const secretKey = process.env.JWT_SECRET; const key ...

javascriptnext.jsjwtjose

Printing a React component using a button causes formatting related to className to be lost, while printing it inline preserves the formatting

I've hit a roadblock in trying to figure out the React and printing issue for the past week and a half, and it feels like I'm going in circles. Despite finding some helpful solutions on Stack Overflow, none of them seem to work completely for me ...

javascriptcssreactjsprinting

Step-by-step guide on uploading a multipart file with AngularJS and Spring MVC

Currently, I am attempting to utilize AngularJS and Spring MVC for file uploading. In my application-context.xml file, I have configured a multipartResolver bean as follows: <mvc:annotation-driven /> <bean id="multipartResolver" ...

javaspringangularjsspring-mvc

Instructions for launching an Android app from a website

Is it possible to invoke my app from HTML? For instance, I am able to successfully call a webpage from my app using this code. android code: startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse( "myDomain.com"))); ...

javascriptandroidhtmliosweb