What are the best practices for correctly implementing Angularjs ng-repeat?

As a newcomer to angularjs, I am in the process of building an app where the output is already set up correctly. However, I am looking to achieve the same without relying on jQuery, and instead want to utilize the angularjs method using "ng-repeat".

Below is the code snippet from my controller:


.controller('SomeListCtrl', function(SomeFromService, $scope, $stateParams, $http){

var encodedString = 'action=' + 
        encodeURIComponent("getSomething") +
        '&count=' +
        encodeURIComponent("10") + 
        '&page=' +
        encodeURIComponent("1");

$http({
    method: 'POST',
    url: 'http://service.something/site.aspx',
    data: encodedString,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data){
    $scope.myData = data;
})
.error(function(data, status){
    console.log(status);
})
})

Here is the part of my html where I need to implement it:

<ion-view view-title="Latest News">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="data as myData" type="item-text-wrap" href="#/tab/myLink/{{data.id}}">
        <img ng-src="http://the-v.net{{data.ImageLink}}">
        <h2>{{data.localTitle}}</h2>
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Just a note, the JSON data returned by the ajax call is structured like this:

[{
"id": "5f6e8bac-197f-4ae3-8535-6d892a101d17",
"localTitle": "Public"
}]

Answer №1

AngularJS controllers prioritize not directly manipulating HTML elements within their code. Instead, they utilize the view/HTML to display the data retrieved from AJAX responses.

Controller

... 
$scope.values = [];

...
.success(function (response,status, headers, config){
    // store the response values in a scope object
    $scope.values = response;
})
...

View

<!-- using ng-repeat to display the values -->
<div ng-repeat="value in values">
    {{value.localTitle}}
</div>

References

Answer №2

https://docs.angularjs.org/api/ng/directive/ngRepeat

To display your JSON data in your AngularJS application, you can declare it in the controller using $scope and then use it in the view.

Example in controller.js:

$scope.myData = 'JSON data here';

Example in view.html:

<table>
   <tr ng-repeat="item in myData"> 
     <td>{{item.localTitle}}</td>
   </tr>
</table>

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

How can the table attribute "name" be obtained and added as the file name for DataTables in the export feature?

Having multiple tables on my page using JQuery DataTables, I find it to be a useful library. I am looking to modify the file name for exporting the data on these tables. I have several DataTables on this page This is how I initialize my tables: $(docume ...

Can the load API in jQuery be utilized to load fragments using a class selector instead of an id?

I've been working on enhancing a website's dashboard by incorporating more widgets onto the page. Interestingly, these widgets are already present on another page within the same domain. After some research, I discovered that utilizing the load A ...

Concealing a hyperlink depending on the value chosen in a dropdown menu

Looking for guidance on how to use jQuery to read the current value of a drop-down list and hide a specific link based on that value. The drop-down list is for selecting the language/locale. For example, when "English" is selected, I want the link to be h ...

Saving the link to the search results for future reference

Procedure: onSearch(searchString) { if (this.props.history) { this.props.history.push( "/details?search=" + encodeURIComponent(searchString) ); } } Explore Bar: <Search onKeyPress={(event) => ...

Return a string to the client from an express post route

I'm attempting to return a dynamically generated string back to the client from an Express post route. Within the backend, I've set up a post route: router.post('/', async (req, res) => { try { // Here, I perform computations on ...

combine multiple select options values in a single function using jQuery

My HTML code includes two select options for users to choose the origin and destination cities. I need to calculate the cost of travel between these cities. How can I compare the selected options using jQuery? </head> <body> <div> ...

How to access the CSS and JS files in the vendor folder using linemanjs

Currently, I am in the process of developing a web application utilizing linemanjs. However, I have encountered an issue where the vendor css and js files are not being referenced correctly when explicitly included. I would appreciate any guidance on what ...

The Vue component fails to refresh after modifications to the state in the Pinia store

I'm currently immersed in my inaugural vue application, focusing on constructing the login functionalities. To handle State management, I've implemented pinia. I've set up a Pinia Store to globally manage the "isLoggedIn" state. import { def ...

Having difficulty with navigating from the jquery css click event within AngularJS

I successfully implemented a click binding using AngularJS with the following code: data-ng-click="vm.newCard()" The newCard() function is defined as: $location.path("xxxx/card/0"); This setup is navigating correctly. However, when using jQuery for a ...

Is there a way to automatically increase a value by clicking on it?

Check out this code snippet I'm working with: let funds = document.createElement('funds') funds.style.color = 'green' funds.style.textAlign = 'center' funds.style.fontSize = '50px' funds.style.backgroundCol ...

Laravel and Vue: tackling pagination issues in a Vue.js and Laravel application

I'm struggling with getting Laravel pagination to function properly. Although I attempt to access results from different pages, I find that I can only retrieve the first page. Even when I click on page 2, upon checking the request payload, it always i ...

Error message: "Property undefined when Angular attempts to call a function from jQuery/JavaScript."

I'm currently attempting to invoke an angular controller from my JavaScript code. This is my first encounter with Angular and I must admit, I'm feeling a bit overwhelmed! I've been following this example: Unfortunately, when testing it out ...

Implementing route navigation in two components using a click button

To display the content of the Quiz component with the path "/quiz" after clicking a button and fetching the component with the path "/" is my goal. Here is the code snippet from the App.jsx file: <Router> <Routes> <Route ...

Best practice for organizing sort icons in a table with React and MaterialUI

I am currently implementing the following code in a tsx component. I am still learning about the various layout options available. You can view my code on this sandbox link. import React from "react"; import { ArrowDropUp, ArrowDropDown } from "@materia ...

Failed attempt in sending JSON array through AJAX to PHP process

My goal is to use an ajax call to send a JSON array to a PHP web service. Despite trying several solutions recommended for similar questions, I have not been successful. Here is the structure of my JSON array: var res= [{"id":-9007199254740990, "NW":{"x" ...

Leverage jQuery to automatically submit an ajax form once all ajax requests have been successfully executed

I have integrated a WordPress plugin for store locator on my website. For pages without the interactive map, I have set up a form that serves as a location search tool. To clarify, the form includes a location field where users can input their desired loc ...

Ways to assign the output of a function to a variable in JavaScript

I am looking to update the value of my function to a variable. As an example, I have the following: <input v-model="search.steering" @input="onChange('steering')"/> This means that I want to insert the steering every time I input text. ...

Are you delving into the realm of reduce functions in order to grasp the intric

Currently following this particular tutorial where they utilize the reduce method to transform an Array<Student> into a { [key: string]: Array<string | number> }. The tutorial includes this expression that caught my attention. It's quite n ...

Access the reset button on a dynamic image using the document.getElementById method

I'm still new to coding in JavaScript and I have a question. In my class, I was required to assign four buttons to four different JavaScript commands. I managed to get three of them working successfully, but the last one seems to be giving me trouble. ...

Tips for finishing Vuetify's circular progress bar using a center percentage value

I've been exploring the features of Vuetify's progress circular component lately. This component allows you to specify a value prop, which represents the current progress percentage. The circle completes when the value reaches 100. In my scenar ...