Loop through the input fields using ng-repeat while maintaining consistent values for each iteration

Question

Loop through the input fields using ng-repeat while maintaining consistent values for each iteration

I am facing an issue with my ng-repeat loop where I have a comment input inside it. The problem is that when I start typing in the first input, the text appears simultaneously in all other inputs as well. I have tried adding a unique ID but it didn't solve the problem.

Below is the code snippet:

<li class="item" style="margin-top:20px;" ng-repeat="schedule in discoverloaded | filter:scheduleSearch | limitTo:numberOfItemsToDisplay">

<input type="text" ng-model="comss.comment" required='required' placeholder="Write a comment..">

</li>

javascript angularjs

Answer 1

Answer №1

If you find yourself in a looping situation where you need to access comss.comment for each iteration, you'll need to make some adjustments to your template and model:

<li class="item" style="margin-top:20px;"
  ng-repeat="schedule in discoverloaded | filter:scheduleSearch | limitTo:numberOfItemsToDisplay track by $index">

  <input type="text" ng-model="comss[$index].comment"
    required='required' placeholder="Write a comment..">

</li>

In the controller, you're dealing with a larger object. For example, if you have a loop of two items in discoverloaded, your comss object would look like this:

comss = {
  0: {
    comment: ''
  },
  1: {
    comment: ''
  }
};

Within the template, you won't be able to access it using comss.0.comment. That's why you use comss[$index].comment since you're inside the loop when assigning the model.

Answer 2

If you find yourself in a looping situation where you need to access comss.comment for each iteration, you'll need to make some adjustments to your template and model:

<li class="item" style="margin-top:20px;"
  ng-repeat="schedule in discoverloaded | filter:scheduleSearch | limitTo:numberOfItemsToDisplay track by $index">

  <input type="text" ng-model="comss[$index].comment"
    required='required' placeholder="Write a comment..">

</li>

In the controller, you're dealing with a larger object. For example, if you have a loop of two items in discoverloaded, your comss object would look like this:

comss = {
  0: {
    comment: ''
  },
  1: {
    comment: ''
  }
};

Within the template, you won't be able to access it using comss.0.comment. That's why you use comss[$index].comment since you're inside the loop when assigning the model.

Loop through the input fields using ng-repeat while maintaining consistent values for each iteration

Answer №1

Similar questions

Unlocking the power of accessing nested data in JSON files dynamically

Avoid excessive clicking on a button that initiates an ajax request to prevent spamming

The Angular carousel is malfunctioning

Is there a way to incorporate electron methods within Svelte files, specifically in Svelte 3, or is there an alternative approach to achieve this integration?

Displaying subtotal in a list using Vue.js and conditional rendering with v-if statement

Animate sliding bar to move from the left using jQuery

What is the process for extracting information from one table based on a column's data in another table?

Navigating the From and To routes in Nuxt/Vue: A comprehensive guide

Error: The current element cannot be clicked. Please try again

Having trouble installing sqlite3? Encounter an issue like this: "srcdatabase.cc(35): error C2248: 'Napi::Env::DefaultFini': cannot access private member declared in class 'Napi::Env'"?

console displaying indentation problems with laravel and vue

Guidance on Implementing a Delay and FadeIn Effect for AJAX Responses from JSON Iterator

"Using Mxgraph's getPrettyXml function does not retrieve the value of a custom

Insert a new item into an existing list using jQuery

Dealing with event delegation on elements that are not nested

Discovering the process to verify and obtain the outcome of an API request through jQuery Ajax

Checking the alignment of a label or element in the center of a webpage using javascript

What is the process for integrating npm packages with bower?

Heroku NodeJS - Page Not Found: Error 404

Could my reliance on useEffect be excessive? - Sorting through information based on the latest search criteria