Unlocking the potential of a singular item within an ng-repeat generated assortment using AngularJS

Question

Unlocking the potential of a singular item within an ng-repeat generated assortment using AngularJS

After successfully generating a list of items using ng-repeat, I found myself facing another challenge. I am currently trying to access and update a specific element within the collection, but I'm struggling with finding the right approach. Can anyone provide guidance on how to achieve this?

Here is a fiddle example for reference: http://jsfiddle.net/VNLPY/ (minimal setup)

<body ng-app>
<div ng-init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
I have {{friends.length}} friends. They are:
<ul>
<li ng-repeat="friend in friends">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>
</div>
</body>

In addition, assuming the data is retrieved from a JSON file, I am curious about the process of accessing each value within the rows of the collection and how to update a specific row in the JSON object. Will the interface reflect these updates accordingly?

Thank you

javascript json angularjs

Answer 1

Answer №1

Here is a fiddle showcasing how to increment the age of a specific friend using an expression in ng-click. It also demonstrates calling a scope function in a simple controller with ng-click.

    <a href="" ng-click="friend.age = friend.age + 1">Age + 1</a>
    <a href="" ng-click="decrementAge(friend)">Age - 1</a>

If we define the controller as:

function TestController ($scope) {
    $scope.decrementAge = function (friend) {
        friend.age = friend.age - 1;
    };
}

Angular will ensure that the model and the view are synchronized effectively.

Answer 2

Here is a fiddle showcasing how to increment the age of a specific friend using an expression in ng-click. It also demonstrates calling a scope function in a simple controller with ng-click.

    <a href="" ng-click="friend.age = friend.age + 1">Age + 1</a>
    <a href="" ng-click="decrementAge(friend)">Age - 1</a>

If we define the controller as:

function TestController ($scope) {
    $scope.decrementAge = function (friend) {
        friend.age = friend.age - 1;
    };
}

Angular will ensure that the model and the view are synchronized effectively.

Answer 3

Answer №2

Starting with proper structuring of your app is essential. Utilizing Angular Seed can serve as a helpful foundation.

Once you have established a solid controller and view, utilizing $scope will allow you to accomplish what you are seeking.

NOT TESTED

Controller:

angular.module('myApp').controller('FriendsController', function($scope, $http) {
  $scope.doSomethingWithAFriend = function(friend) {
     // do something with your friend!
  }

  // $http operates similarly to jQuery.ajax but returns promises based on the $q (q.js) spec.
  $http.get('/api/friends').then(function(resp) {
    $scope.friends = resp.data;
  }, function(err) {
    console.log(err);
  });
});

View

<li ng-repeat="friend in friends">
  [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old. 
  <a href="" ng-click="doSomethingWithAFriend(friend)">Do Something</a>
</li>

Edit: It's important to note that the appropriate place for API calls (or any AJAX/data manipulation) is in Services. I demonstrated it in the controller for simplicity.

Answer 4

Starting with proper structuring of your app is essential. Utilizing Angular Seed can serve as a helpful foundation.

Once you have established a solid controller and view, utilizing $scope will allow you to accomplish what you are seeking.

NOT TESTED

Controller:

angular.module('myApp').controller('FriendsController', function($scope, $http) {
  $scope.doSomethingWithAFriend = function(friend) {
     // do something with your friend!
  }

  // $http operates similarly to jQuery.ajax but returns promises based on the $q (q.js) spec.
  $http.get('/api/friends').then(function(resp) {
    $scope.friends = resp.data;
  }, function(err) {
    console.log(err);
  });
});

View

<li ng-repeat="friend in friends">
  [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old. 
  <a href="" ng-click="doSomethingWithAFriend(friend)">Do Something</a>
</li>

Edit: It's important to note that the appropriate place for API calls (or any AJAX/data manipulation) is in Services. I demonstrated it in the controller for simplicity.

Unlocking the potential of a singular item within an ng-repeat generated assortment using AngularJS

Answer №1

Answer №2

Similar questions

Utilizing AJAX to dynamically update div content within an overlay

Using Javascript or jQuery to Enhance the Appearance of Text on a Website

Sending Paypal IPN Data to Node.JS: A Step-by-Step Guide

Looking for PHP script to save a JSONArray sent from an Android app into a remote database

The issue of receiving an undefined JSON response persists in an AJAX file upload scenario

Utilizing Ajax and Jquery/JavaScript to dynamically generate HTML elements when data surpasses zero

The Appsheet algorithm determined the exact expiration date as 2 days from the specified date

Send data in JSON format from an AngularJS client to an Express server

Is Git a viable option for storing data in a database format? Are there any npm packages or JavaScript libraries available for implementing this functionality

My Experience Dealing with an Issue on the Star Wars App

Steps for changing tabs in Ionic depending on a specific condition

Converting an rrule date value from an array to a customized string format

Having difficulty stripping HTML tags from the response JSON

How to efficiently update multiple values within an array in MongoDB

The uncertainty surrounding the usage of checkboxes in D3.js

JavaScript: Update Div Background Automatically

Converting an array of errors to JSON in Go: A step-by-step guide

JavaScript / Regular Expression: remove the initial <p> tag if it meets a specific condition

Exploring the best practices for rendering nested array elements in React.js

Error in HTML Sorting