Angular.js: Enhance (data-bind) a single element within ng-repeat

Below is the html code snippet I am working with:

  <li ng-repeat="friend in friends">
        <span ng-repeat="(key, value) in friend.aktuell">
            <input type="text" ng-model="friend.aktuell[key]"> 
        </span>
      <quick-datepicker ng-model="auditDate"></quick-datepicker>
      <button ng-click="audit(auditDate, friend._id)" class="btn btn-info">Audit</button>
  </li>

The challenge I'm facing is updating only the input fields of the specific friend[index] that has been clicked by the audit button.

For example:

   $scope.audit = function(auditDate, id){
            $scope.friends[1].aktuell = {someData:someValues}; // this works if the index is hard coded
        });
    };

The above code successfully updates when 'friends[1]' is hardcoded into the function call, but I need to update the clicked field dynamically.

Ideas: Is there a way to pass the index of the clicked element to my audit function or can I modify the input fields based on "friend._id = friend._id"?

Screenshot:

Answer №1

You can access the $index variable within ng-repeat loop:

ng-click="audit(auditDate, $index)"

Answer №2

Have you considered passing the actual friend object instead of just its index?

<button ng-click="audit(auditDate, friend)" class="btn btn-info">Audit</button>

Here's how it can be implemented in the controller:

$scope.audit = function(auditDate, friend){
        friend.aktuell = {someData:someValues};
    });
};

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

Error message: The requested resource could not be loaded due to a server error (status code 500) when using

I have been struggling to identify the exact issue with my code, despite referencing previous questions on the topic. function viewcalldetails(obj) { alert("clicked"); var id = $(obj).attr("id"); $(".style-t ...

After a refresh of the single-page site, the header is not the first thing displayed

Upon refreshing the site, I encounter an issue where the header does not display first. Instead, it directly leads me to the contact section located further down the page. Has anyone else experienced this problem and found a solution? It's worth menti ...

The webpack development server operates on a separate port

Currently, my IIS server is serving up my WebApi and AngularJS project on port 80 with the alias mywebsite.local-dev.com in the hosts file. I have configured webpack to bundle everything and now I want to add webpack dev server so that changes to a file t ...

Ways to simulate mobile device gyroscope (deviceorientation event) on a desktop browser for troubleshooting?

Incorporating mobile device orientation events into a three.js web project has left me perplexed on how to establish an effective debugging process for testing motion controls on desktop. I am seeking advice on the most efficient method to simulate orien ...

Adjust the ng-repeat filter dynamically based on parameters retrieved from ui-sref

In my ng-repeat list, I have a custom filter that can be dynamically changed by buttons on the same page. However, I am now trying to figure out how to change this filter with a value from outside the page. Specifically, I want to press a button on my hom ...

I'm looking to include an icon in my TreeItem component in Material UI 4. How

I have a unique menu created using MATERIAL UI 4, consisting of a primary TreeItem for the main menu and a secondary TreeItem for the submenu sections. I am looking to assign a specific icon to each main menu label. How can I achieve this? Additionally, ...

What steps do I need to take to modify the MUI Badge component and insert custom text inside?

Is there a way to replace the number with a label next to a new row added to my table using MUI Badge? For example, instead of displaying a number like 4, I want it to show the word "New" as shown in this image: enter image description here This is the co ...

What are some ways to implement dangerouslySetInnerHTML in conjunction with read-more-react from npm?

Is there a way to include dangerouslySetInnerHTML in a text field without receiving an error? <ReadMoreReact text={yourTextHere} min={minimumLength} ideal={idealLength} max={maxLength} readMoreText={read ...

I'm having trouble figuring out why my Vue method isn't successfully deleting a Firebase object. Can anyone offer some guidance

What I am trying to achieve: I have been struggling to use the remove method from Firebase. I have read the documentation, but for some reason, it is not working as expected. Retrieving data using snapshot works fine, but when I try to delete using the re ...

Is it possible for me to use an NPX tool to execute git clone command?

I am currently working on developing a personalized NPX tool that will install my custom npm package onto a locally hosted server. At the moment, I have a layout template that I want other users to replicate when they run my NPX command. Here is an exampl ...

Having Trouble with Your Instafeed Script

I've been working on a project that involves integrating an Instagram feed into a website. However, I'm facing difficulties getting it to function properly. Here's the code that I have implemented. <script type="text/javascript"> ...

Reactjs not rendering image properly

Having issues loading an image in a project created with create-react-app due to a persistent parsing error. Check out the code below: 1 import React, { Component } from 'react' 2 import profile from './profile.png' 3 4 class ...

Transfer a client-side application built in Angular JS to Android platform

Situation: Our project, Bahmni, an Open Source EMR designed for low-resource non-profit healthcare facilities, utilizes Angular JS as its front end. While previously only accessible via intranet, Bahmni will now be deployed in an entire country on the clou ...

How can I find the length of an array in Mongoose without using

This is the model I am currently working with: const postSchema = Schema( { author: { type: Schema.Types.ObjectId, ref: "User", }, likes: [{ type: Schema.Types.ObjectId, ref: "Like", },], ...

Exploring the features of AngularJS ui-router: ui-sref functionality and utilizing custom

My HTML looks like this: <span ui-sref="{{detailsArt(art.Id)}}" check-val></span> Within my directive check-val, I have the following code: link: function(scp, el, attr) { el.bind('click', function(event) { //some logic with ...

Creating stylish error labels using Materialize CSS

While Materialize has built-in support for validating input fields like email, I am looking to implement real-time validation for password inputs as well. This would involve dynamically adding error or success labels using JavaScript. Unfortunately, my at ...

Navigating through 'ui-router' to a specific state depending on the user's

Is it possible to redirect a user to a particular state using data from cookies with ui-router? I attempted to accomplish this within the .config() function but encountered issues due to the inability to inject additional dependencies. Another approach I ...

What is the relationship between an odd number and the value 1 in JavaScript that results in a 'true' outcome?

I encountered a straightforward problem, but the solution has left me perplexed. function transformArray(numbers) { // If 'i' is an odd number, i & 1 will evaluate to 1 or true return numbers.map(i => (i & 1) ? i * 3 : i * 2); } co ...

Having trouble persisting my login status in Selenium using Python

Has anyone experienced issues with logging into Instagram using an automate tab? Previously, I didn't have any problems, but now it seems that Instagram is not allowing users to log in through automation. An error message stating the following appears ...

The underscore (_) parameter in HTTP GET requests

Lately, I've been seeing the '_' parameter on many websites with a seemingly random string attached to it. For example: website.com/?_=98765432 Can someone explain the significance of this parameter and how these numbers are generated? ...