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

What advantages does NextJS offer that set it apart from other frameworks that also provide Server Side Render solutions?

Encountering a "Module not found" issue while attempting to utilize the Google APIs Node.js client

Is it possible to add data in MongoDB without specifying a field name?

When using Vue3 along with Axios.post, the data is being serialized incorrectly

React App with Material UI V1-beta Integration

Substitute the division

"Learn how to create a scrolling div using a combination of CSS and JavaScript with absolute and relative

Creating a new object in an empty array within my profile model (mongodb/mongoose) is simple. Just follow these steps to successfully add a

Analyzing the current time against a user-inputted time using Javascript

Limiting the number of checkboxes selected in a Checkbox Group based on

Converting multipart/form-data to multipart/mixed: A step-by-step guide

Is there a way to pass around jest mocks across numerous tests?

My attempts to load the .mtl and .obj files using THREE.js have been unsuccessful

Error: The request does not have the 'Access-Control-Allow-Origin' header

Save a document to the file system and retrieve it using Express

Inconsistencies observed during the native JSON import process in JavaScript

Tips for including a line within a circular canvas

Is there a way to adjust the size of text to perfectly fit within a fixed size div?

Adding elements to a roster

Watch the video and follow along with your mouse using jQuery