Is there a way to loop through dynamically generated parameters?

My code is designed to generate dynamic forms with unique names like the following:

<div ng-click="wos.wordWordFormRowClicked(wf, $index)"
     ng-form="wos.wordFormNgForm_{{$index}}"
     ng-repeat="wf in wos.word.wordForms">

The service responsible for this functionality is named "wos".

Currently, I am looking for a way to iterate over these dynamically created forms and check their $pristine status. One approach I'm considering involves using angular.forEach as shown below:

    angular.forEach(self.word.wordForms, function (wf, key) {
        // ?
    });

A specific issue I'm facing is how I can access the corresponding wos service parameter within the forEach loop. These parameters would have names similar to:

    wos.wordFormNgForm_1.$pristine
    wos.wordFormNgForm_2.$pristine
    wos.wordFormNgForm_3.$pristine
angularjstypescript

Answer №1

Utilizing Angular's "Controller as" syntax allows us to easily bind the FormController with the Controller of the current view.

<div ng-app='app' ng-controller='default as wos'>
      <div ng-click="wos.wordWordFormRowClickd(wf, $index)"
           ng-form="wos.wordFormNgForm_{{$index}}"
           ng-repeat="wf in wos.wordForms">  
      </div>
</div>

In addition, we can make use of array syntax to access properties of an Object.

angular.module('app',[]).controller('default', function() {  
    this.wordForms = ["1", "2", "3", "4"];
    this.checkForm = function() {
    for (var i = 0; i < this.wordForms.length; i ++) {
            console.log(this["wordFormNgForm_" + i].$pristine);
    }
 }
})

You can check out a live demo on my jsfiddle page

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

Is it a requirement to verify promises prior to an expectation check when using Protractor and AngularJS?

I have a testing code snippet that I'm working with and it looks like this: pageLogin(userName: string, password: string) { element(by.id('loginUserName')).clear(); element(by.id('loginPassword')).clear(); element(by.i ...

angularjsprotractor

I'm having trouble loading my Mapbox style in my Angular application

I'm attempting to integrate a custom mapbox style that I have uploaded to the studio, into my angular application. Interestingly, it functions flawlessly with a different factory mapbox style (e.g. mapbox://styles/mapbox/streets-v11) and another one o ...

angulartypescriptmapboxmapbox-gl-jsmapbox-gl

Having difficulty changing the label text in an angular controller

On a HTML page, there is an anchor tag and a select dropdown. The dropdown is connected to a scope variable of an angularjs controller. Functionality: Whenever the selected value in the dropdown changes, it should update the text in the anchor tag. Issue ...

javascriptjqueryhtmlangularjs

Guide to creating individual column templates in Kendo-UI grid

I recently started using Kendo-UI in my project and wanted to have a column in my grid display an image button along with a field, similar to the 'Contact Name' column in the documentation here. After exploring the documentation, I came across th ...

javascriptangularjskendo-uitelerikkendo-grid

Angular - Switching Displayed Information

I am currently working with Angular 4 and I am attempting to switch between contenteditable="true" and contenteditable="false" Here is what I have so far: <h1 (dblclick)="edit($event)" contentEditable="true">Double-click Here to edit</h1> Al ...

javascriptangulartypescript

Angular fails to establish connection due to termination before receiving a handshake response

While attempting a socket connection, an error popped up. I am following this tutorial on tutorialedge.net but using a different endpoint for implementation. socket.service.ts import { Injectable } from '@angular/core'; import * as Rx from & ...

angulartypescriptwebsocketangular6

Troubleshooting issues when testing Angular services using Jasmine and Chutzpah

I've been facing some challenges while attempting to test my AngularJs services with Jasmine as I encounter various errors consistently. In an effort to troubleshoot, I decided to create a simple Sum service for testing purposes but unfortunately, the ...

javascriptangularjsunit-testingjasminechutzpah

Is it recommended to keep Angular properties private and only access them through methods?

I'm starting to get a bit confused with Angular/Typescripting. I originally believed that properties should be kept private to prevent external alteration of their values. Take this example: export class Foo{ private _bar: string; constructor(pr ...

angulartypescriptdata-bindingangular-changedetection

AngularJS is having issues with 'Scope' function being invoked repeatedly

I have a dynamic process in which Li elements are added with an attached scope function. However, when clicking on these elements, the function is being called multiple times. To see this issue in action, you can check out this demo on JSFiddle: http://jsf ...

jqueryhtmlangularjs

Develop a PDF generator in ReactJS that allows users to specify the desired file name

Is there a way to customize the file name of a generated PDF using "@react-pdf/renderer": "^2.3.0"? Currently, when I download a PDF using the toolbar, it saves with a UID as the file name (e.g., "f983dad0-eb2c-480b-b3e9-574d71ab1 ...

javascriptreactjstypescriptpdfreact-pdf

Manipulating, modifying, and verifying distinct information rather than inputting to / retrieving from the model through the use of Reactive Forms

My configuration I am retrieving a value from the database as a number. This value must always be a number, except when displaying it in an input element and validating user input. In those cases, the number needs to be a HEX value. Here is the desired p ...

angularformstypescriptarchitecture

Name values not appearing in dropdown list

Looking for some assistance with displaying a list of names in a dropdown menu using Angular. The dropdown is present, but the names from my array are not appearing. I think it might be a simple fix that I'm overlooking. I'm new to Angular, so an ...

htmlangulartypescript

initiate an animated sequence upon the initialization of the Angular server

Is there a way to launch a Netflix animation after my server has started without success using setTimeout? I don't want to share the lengthy HTML and CSS code. You can view the code for the animation in question by visiting: https://codepen.io/claudi ...

htmlcssangulartypescript

Encountering errors while adding Storybook to a TypeScript-react project with existing stories

I recently added storybook to my TypeScript React project, but I encountered an error when running yarn storybook. The issue seems to be related to the "as" keyword in the generated code. -- Error message Parsing error: Missing semicolon 10 | back ...

typescriptstorybook

Toggle display of elements upon button click in Angular

Struggling with Angular code to show/hide elements on button click. I have written the following code so far, but my lack of knowledge is causing trouble. My goal is to have 3 text boxes where the first box is visible by default and each subsequent box be ...

angularjs

Learn how to automatically display a modal upon loading a webpage by simply entering the URL of the specific template

Is there a way to trigger the modal pop-up by simply typing a URL link without the need for any click function? I am currently attempting to display the modal without requiring a login, but when I type the URL, the modal appears briefly and then disappears ...

angulartwitter-bootstraptypescript

Efficient process using angularJs alongside Laravel 4

As a newcomer to angularJs, I have found it incredibly useful in the realm of web development. However, I encountered some questions while trying to integrate it with server-side languages (specifically PHP with Laravel 4.1). AngularJs comes equipped with ...

phpajaxangularjslaravel-4

Secure token verification in a Django REST framework and Angular collaboration

Currently, I am utilizing DRF and Angular in a mobile client environment. During my research, I came across the django-rest-auth package. I decided to use it because of its TokenAuthentication feature, which is ideal for mobile clients. After sending a ...

angularjsdjango-rest-frameworkdjango-authenticationhttp-token-authentication

Are JQuery functions affected when navigating between pages in smart-tables?

Apologies if this question has been answered before or seems obvious. I couldn't find a solution after searching, and as someone new to web development, I might be going in circles here. Issue: I've integrated the smart-table extension () into ...

javascriptjqueryhtmlangularjssmart-table

The takeUntil function will cancel an effect request if a relevant action has been dispatched before

When a user chooses an order in my scenario: selectOrder(orderId): void { this.store$.dispatch( selectOrder({orderId}) ); } The order UI component triggers an action to load all associated data: private fetchOrderOnSelectOrder(): void { this.sto ...

angulartypescriptrxjsngrx