How to properly apply Angularjs ng-repeat?

Question

I'm just a beginner in angularjs, and I'm creating an app, I already made the output correctly but I want to achieve it without using jQuery, I want to do it using angularjs way using "ng-repeat".

The following code is what's inside 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);
})
})

And this is in my html where I need to pass 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>

P.S. The data that the ajax call returns is json. which is constructed this way

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

This is *entirely* the wrong approach. You should avoid storing HTML in variables when using angular whenever possible, and instead allow angular to manage your DOM. — Claies, May 16 '16 at 03:38
yes that's why I made the question on how to do it in angular js way :) — JC Borlagdan, May 16 '16 at 03:39
I **highly** recommend taking a read through http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — Claies, May 16 '16 at 03:41
I already did even https://docs.angularjs.org/api/ng/directive/ngRepeat it's just that I'm finding it hard to understand it so maybe I need others opinion since I can't revive other people's post — JC Borlagdan, May 16 '16 at 03:42
Error: [ngRepeat:iexp] Expected expression in form of '_item_ in _collection_[ track by _id_]' but got 'data as myData'. — JC Borlagdan, May 16 '16 at 04:09
try this `ng-repeat="data in myData"` NOT `ng-repeat="data as myData"` — khakiout, May 16 '16 at 04:10

khakiout · Accepted Answer · 2016-05-16T03:54:03.753

3

AngularJS controllers aims not to use/create HTML elements directly in their code. You use the view/HTML to render the values returned by the AJAX response.

Controller

... 
$scope.values = [];

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

View

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

References

edited May 16 '16 at 03:54

answered May 16 '16 at 03:36

khakiout

2,372
25
32

yes that's why I want to change this in angularjs way.. i'll try this one out first THANKS! – JC Borlagdan May 16 '16 at 03:38
hey it became a lot more confusing after your edit -_- – JC Borlagdan May 16 '16 at 03:46
now I got more questions -_-, what is the $index for? and what if the localTitle will be more than 1. – JC Borlagdan May 16 '16 at 03:50
@JCBorlagdan the tracking is just for duplicate entities in the response. the '$index' is angular way of counting which element is now in the loop (e.g. index 0 for the 1st element, 1 for the 2nd) – khakiout May 16 '16 at 03:52
You can disregard the 'track by' for now. I'll revert it to the simpler one – khakiout May 16 '16 at 03:53
will this automatically increment on its own up to the last data of the json data? – JC Borlagdan May 16 '16 at 03:53
@JCBorlagdan yes, it does. it's part of angular ng-repeat – khakiout May 16 '16 at 03:54
hmm.. I edited the question.. I did it that way but i'm getting an error.. did i apply it correctly? – JC Borlagdan May 16 '16 at 04:04

score 1 · Answer 2 · answered May 16 '16 at 03:41

1

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

just declare your json data in controller with scope then use it on your view

controller.js

$scope.myObj = 'http response here';

view.html

<table>
   <tr ng-repeat="data as myObj"> 
     <td>{{data.localTitle}}</td>
   </tr>
</table>

answered May 16 '16 at 03:41

June Jovi Granados

54
3

I'll try this one out – JC Borlagdan May 16 '16 at 03:52
I edited the question.. but i'm getting an error, i applied your answer to my code.. but i don't know if i did something wrong or is it your code? – JC Borlagdan May 16 '16 at 04:05
aahh.. it should be ng-repeat="data in myObj" but so many thanks for the help! – JC Borlagdan May 16 '16 at 04:12

How to properly apply Angularjs ng-repeat?

2 Answers2