Using the $index selector within ng-repeat and ng-class

I am trying to target the form element within an ng-repeat using a 1:n selector in ng-class. However, I have run into issues with using {{}} + $index in the ng-class expression. The interpolation seems to be parsed correctly but ng-class is not recognizing the selector when it contains {{}} + $index.

Code:

<form name="vm.itemForm" ng-submit="vm.onSave()">
(...)
  <tr ng-repeat="item in vm.item.sizes | orderBy:predicate:reverse">
    (...)
     <div class="dc-input-group">
        <input class=""
               ng-model="item.stock"
               ng-class="{ 'testclass': vm.itemform.{{'stockInput'+$index}}.mySelector  }" 
               name="{{'stockInput'+$index}}" />
        </div>

HTML Output:

  <input class="form-validation dc-input dc-input--in-input-group dc-input--text-right ng-touched ng-not-empty ng-dirty ng-valid-number ng-valid ng-valid-required" 
    ng-model="item.stock"
    ng-class="{ 'testclass': vm.form.stockInput1.$valid }" 
    required=""
    name="stockInput1" 
    type="number"> 

Answer №1

The ng-class directive is already considered an expression, so attempting to nest expressions resulted in the issue you were facing. To resolve this problem, you can adjust your code as shown below:

<input class=""
       ng-model="item.stock"
       ng-class="{'testclass': vm.itemform['stockInput'+$index].mySelector}" 
       name="{{'stockInput'+$index}}" />

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

Comparing boolean values in React JS

I am working with a React JavaScript code in which I am iterating through a series of boolean values. The issue I am facing is that when 'data.nextrow' is false, I expect nextrow1 to also be false but it ends up being set to true instead. co ...

Unexpected behavior in Next.js when using Auth0: pageProps are empty when wrapped with withPageAuthRequired HOC

Explaining the Issue The problem arises when using withPageAuthRequired with getServerSideProps, as the pageProps object is empty. Despite following common practices, the pageProps parameter remains undefined. Expected Outcome Upon calling getServerSideP ...

File or directory does not exist: ENOENT error encountered when attempting to access 'distrowserindex.html'

Upon executing ng deploy --preview, an error is encountered: Error: ENOENT: no such file or directory, open 'dist\index.html' at Object.openSync (fs.js:457:3) at readFileSync (fs.js:359:35) Despite attempting various online tutorial ...

Vue - Triggering @change event for file input element when files are set programmatically using ref instead of drag and drop upload

My setup includes a file input for drag and drop image uploads. <input type="file" ref="FileInput" style="display: none;" @change="onFileSelect" accept=". ...

Issue with Collapse Feature on Bootstrap 3.x Navbar

The Bootstrap 3 Navbar expands properly in full screen and on a browser with a small width on a desktop PC and mobile browsers, but when using the Toggle navigation button, it doesn't slide down. I have tried to replicate the code from this example: h ...

Tips for preventing the addition of a comma at the end of a foreach loop item

Is there a way to prevent adding a comma after the last element, like in the case of ABC1 where a comma should not be added? https://i.sstatic.net/12lNu.png You can find the code sample here >>>Sample methods:{ test(){ this.Aarray.fo ...

Achieve consistent action execution for both the footer and header included in all pages using AngularJS

This particular query has a significant possibility of being considered a duplicate, but in my attempts to find a satisfactory explanation for my problem through various searches, I have not been successful - so please accept my apologies if this is indeed ...

Having trouble executing JavaScript within a ColdFusion cfoutput tag

As part of creating a form editor in Coldfusion system, I am keen on leveraging inline script tags for adding Javascript event listeners dynamically. Here is how my code structure looks like: <cfoutput> ... <cfloop> <cfset For ...

Integrating external information with components

Currently in my React application, I am fetching a list of stores by directly calling the API through the URL. const getStore = async () => { try { const response = axios.get( 'http://localhost:3001/appointment-setup/storeList& ...

Easy Steps for Mapping Json Data into an Array

Here is the JSON Format I am working with: { "Data": { "-template": "Parallax", "Explore": { "IslandLife": { "TourismLocation": [ { "Title": "Langkawi", "Latitude": "6.350000", "Longitude": "99.800000", "YouTub ...

Using NextJS to fetch data from an API after a form submission

Struggling with integrating an API call in my NextJS application, specifically when submitting a form. I keep encountering a random error upon submission, Error: Search(...): Nothing was returned from render. This usually means a return statement is missin ...

Unveil the socket connection using web sockets

My current setup involves a server generating a socket on port 8181. I am interested in accessing this socket from a web page viewed in Google Chrome version 14. It seems that direct access may not be feasible, as Chrome only supports Web Sockets and not s ...

Unable to choose options fetched from the API in Select2 Ajax

I've been struggling to populate a select input with data from my API using Select2. Despite having everything set up correctly, I'm facing an issue where I can't select anything once the results are displayed. I've been working on this ...

Achieving compatibility between Select2 Gem and ActiveAdmin "New" Button

I have a Ruby on Rails application that utilizes the ActiveAdmin and Select2 Gems. Currently, I have implemented a search box that displays potential options from the provided set after typing two letters. The code for this feature is as follows: f.has_ma ...

Using JSON to pass checkbox values in Jquery

Recently, I encountered a dilemma with my input form. It consists of three text fields and a checkbox section where users can select multiple values. Additionally, there is an ajax request that sends a POST request to an api. To handle this, I created a fu ...

Identifying browser compatibility with thick WebGL lines

According to the documentation provided by three.js: Due to limitations in the ANGLE layer, when using the WebGL renderer on Windows platforms, linewidth will always be set to 1 regardless of the specified value. Wide lines may not work in certain brow ...

The console output is repeated twice

Having an issue with Hooks Methods in React. I am working on an input search and when the key "Enter" is pressed, it triggers a function to set the value. However, I am encountering a problem where the console.log("hi") is being printed twice for some unkn ...

Field for user input along with a pair of interactive buttons

I created a form with one input field and two buttons - one for checking in and the other for checking out using a code. However, when I submit the form, it leads to a blank page in the php file. What could be causing this issue? UPDATE After changing fro ...

EPO provides a powerful REST API for generating JSON responses

When accessing the REST Service to retrieve data, I encounter a challenge. The response is in XML form when I need it to be in JSONP format. Even when trying to use callback=JSON_CALLBACK parameter, the result remains unchanged. Creating my own callback m ...

angularjs model items updated

Transitioning to angularjs has been a bit challenging with the learning curve :(( Check out this fiddle: http://jsfiddle.net/ereallstaff/QgEx9/ I am facing two issues: 1- The class doesn't change according to the ng class if statement. ng-class ...