Updating a model within an ng-repeat directive from external sources

Question

Updating a model within an ng-repeat directive from external sources

Within my controller, there is a repeater where each item has its own unique status:

<div ng-controller="...">
  <div ng-repeat"...">{{status}}</div>
</div>

Currently, changing the status within the repeater by using status = 'foo' works perfectly. However, I need to change this status from the controller in order to incorporate ajax calls and other functionalities. Despite my efforts to search online and consult with Google, I have been unable to find any information on accessing the scope of an individual repeated item.

This fiddle demonstrates the issue. When you click one of the buttons, it changes the status of the entire scope to clicked. My goal is to only change the color of the circle next to the button to blue without adding another value to the list for specific reasons.

javascript angularjs

Answer 1

Answer №1

This situation exemplifies prototypal inheritance. To assign a status in the current scope, you can utilize this.status.

You can view my demonstration on this topic by clicking here:

http://jsfiddle.net/BdcuS/

When the method is called, it operates within the context of the current scope, specifically the scope of ng-repeat.

I also recommend checking out this informative wiki page for further insight: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

This situation exemplifies prototypal inheritance. To assign a status in the current scope, you can utilize this.status.

You can view my demonstration on this topic by clicking here:

http://jsfiddle.net/BdcuS/

When the method is called, it operates within the context of the current scope, specifically the scope of ng-repeat.

I also recommend checking out this informative wiki page for further insight: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 3

Answer №2

Every individual item should be assigned its own distinct status attribute, instead of sharing a single one connected to the controller. Here is an example:

function barCtrl($scope, $timeout){
    // Each object in the list now has its own unique status property
    $scope.list = [{status: null}, {status: null}, {status: null}];

    $scope.setStatus = function(item, status){
        // Update only the status of that specific item
        item.status = status;

        //Simulate an ajax request
        $timeout(function(){
            item.status = null;
        }, 1000);
    }
}

View:

<div ng-repeat="item in list">
    <div class="circle {{item.status}}">

    </div>
    <button ng-click="setStatus(item, 'clicked')">click me</button>
</div>

Check out updated jsFiddle

Answer 4

Every individual item should be assigned its own distinct status attribute, instead of sharing a single one connected to the controller. Here is an example:

function barCtrl($scope, $timeout){
    // Each object in the list now has its own unique status property
    $scope.list = [{status: null}, {status: null}, {status: null}];

    $scope.setStatus = function(item, status){
        // Update only the status of that specific item
        item.status = status;

        //Simulate an ajax request
        $timeout(function(){
            item.status = null;
        }, 1000);
    }
}

View:

<div ng-repeat="item in list">
    <div class="circle {{item.status}}">

    </div>
    <button ng-click="setStatus(item, 'clicked')">click me</button>
</div>

Check out updated jsFiddle

Updating a model within an ng-repeat directive from external sources

Answer №1

Answer №2

Similar questions

Add an element to the input field

What is the best way to create dynamic transparency based on cursor position?

Tips for revealing a hidden HTML tag

Expanding the capabilities of search and replace in Javascript is imperative for enhancing its

How to adjust cell alignment in Handsontable

Can you display a popup on a leaflet map from beyond its boundaries?

How to Delete Decimal Points from a String Using Regular Expressions

Rely on the razor method for generating URLs

Tips for attaching to a library function (such as Golden Layout) and invoking extra functionalities

Expanding size on hover without affecting the alignment of surrounding elements

JavaScript text converter using split() method

The power of selenium meets the functionality of Javascript with the webdriver

Instructions for linking a directive in Angular JS to a model containing keys that are generated dynamically

react component not displaying image

The "src" attribute is missing from the image on the left side

Retrieve a specific nested key using its name

Updating or swapping images using JavaScript and HTML

Having trouble inputting text into the text area using Selenium WebDriver with C#

Utilizing two DTOs for a single controller in NestJS

Store the injected HTML within a PRE tag as a variable