I am wondering how can I view different objects within an object using ng-repeat?
This is the following code that I have so far, to iterate over the $ID of the objects in array:
<div ng-repeat="message in messages"> {{message.$id}} </div>
This is how my array looks like: http://imgur.com/8quH0iW
As you can see, the array structure looks like that:
--Item[0]:
-----$Id:xxxxx
-----Message1(unique ID):
-------------:date: "XX-XX-XXXX"
-------------:message: "whatever"
-------------:sender: "xxxxxxxxxxxxxxxxxx"
-----Message2(unique ID):
-------------:date: "XX-XX-XXXX"
-------------:message: "whatever"
-------------:sender: "xxxxxxxxxxxxxxxxxx"
--Item[1]:
-----$Id:xxxxx
-----Message1(unique ID):
-------------:date: "XX-XX-XXXX"
-------------:message: "whatever"
-------------:sender: "xxxxxxxxxxxxxxxxxx"
-----Message2(unique ID):
-------------:date: "XX-XX-XXXX"
-------------:message: "whatever"
-------------:sender: "xxxxxxxxxxxxxxxxxx"
Etc.
TLDR: How can I use ng-repeat to repeat over the objects within an item of an array? Also, can I use ng-repeat to get the last object in an item? For example, the last Message sent?
Thanks!
You don't mention whether the items in your array are arrays or JSON objects. If you have an array of JSON objects then this will work
vm.objectsTest = [{$id : 123}, {$id: 234}];
<ul ng-repeat="o in vm.testObjects"><li ng-bind="o.$id"></li></ul>
If your items are arrays then you will need to access the object within the array, like this:
vm.objectsTest = [[{$id : 123}], [{$id: 234}]];
<ul ng-repeat="o in vm.testObjects"><li ng-bind="o[0].$id"></li></ul>
Alternately if you need to iterate over the items of your nested array, then you may need to have nested ng-repeats. However the best option would be to change your data structure as using ng-repeat excessively can create performance issues.
See this post for accessing the last element of ng-repeat
Different class for the last element in ng-repeat
Related
In my array there is multiple key value having same name . I want to list them all in my View how can I achieve that ?
I am facing error stating [ngRepeat:dupes] Duplicates in a repeater are not allowed.
This is my JSON array :-
["text-align", "space-before", "space-before.conditionality", "font-size", "font-weight", "line-height", "font-size", "font-weight", "line-height", "space-before", "font-size", "font-weight", "line-height", "position", "top", "bottom", "right", "left", "text-align", "force-page-count", "break-before", "font-size"]
As we can see few keys are repeating . I need to list all repeated values without missing any in my View
You you use ng-repeat it loops over the unique values in the array. If you have duplicate values then you need to explicitly mention the Angular module to ignore the values to be unique and look for unique index value, by doing:
ng-repeat = "item in items track by $index"
Using track by you can explicitly mention that which value should be checked as a uniqueness measure while rendering the DOM using ng-repeat. You can even use the property of the object like item in items track by item.id where item is a object having id property and items is a array of objects.
Your array has font-size specified multiple times in the array so use track by $index.
You can use track by $index to remove this error, something like this
<tag ng-repeat="item in items track by $index">
//content
</tag>
https://docs.angularjs.org/api/ng/directive/ngRepeat
I am trying to learn angular. I am having a hard time understanding part of this: http://www.learn-angular.org/#!/lessons/repeaters
In that example we're looping through a collection and displaying each element. Easy enough.
What I don't understand is: the collection is named "products" and each element is referred to as "product" no where in the JS code is the word product. How does angular know to call the element by "product"? Does a collection have to be plural and an element singular in name?
The identifier is assigned in the view (aka, the HTML):
<tr ng-repeat="product in products">
ng-repeat takes an expression that defines the identifier it will assign elements in the collection. So, in this case, you bind each item in products to product. This is then accessible in the scope, so any child element of the tr can access product on the scope as $scope.product.
You can name the identifier anything you want. product in products is equally as valid as bananas in apple, so long as your collection is on $scope.apple and you use the identifier bananas to refer to the item in each collection.
The first variable name passed to an ng-repeat is scoped to that ng-repeat. It's only on the template, not in the JS code, and is only available in that repeat block. So, it's essentially made up. Common conventions have people call it the singular form of the plural array (i.e. for product in products, for item in items, etc.), but that variable only refers to the current ng-repeat element on the template inside the ng-repeat.
I have a problem with the refresh button in my Angular application:
I have a json object with two arrays in it -> data = {array1: [], array2: []}
I want to loop both arrays and print the related values. To achieve that, I use the Angular ng-repeat directive like this:
ng-repeat="index in [] | index:getTotalNumberOfObjectsInArray1()"
...
<span ng-bind="data.array1[index]"></span>
<span ng-bind="data.array2[index]"></span>`
My Problem is, that on every click on the refresh-button these data will be recreated on the dom.
I learned the documentation about "track by" but i understand it only on objects (for example: ng-repeat="a in objects track by a.id")
How can I use this track by filter for my ng-repeat above, to prevent the recreation of my data?
You can use $index that is defined in a ng-repeat (cf.doc) but you have to have the two array with the same length.
Another solution could be to merge your arrays together and loop on it but I am not sure if it answer to your question.
In almost all the examples of ng-repeat I've seen, the data is structured like so:
$scope.dataCollected = [{name: bob, data: '10-12-12'}, {name:joe, data: '09-13-13'}];
However, the only way I can get ng-repeat to work is if I structure the data like this:
$scope.dataCollected = {bob: {name: bob, data: '10-12-12'}, joe: {name:joe, data: '09-13-13'}};
Structuring it as an array causes the ng-repeat to do absolutely nothing. It doesn't even give an error. Structuring it as an object containing objects works, but I'd like to use an array because I understand it's the only way to use a filter on ng-repeat.
I'm calling the ng-repeat like this:
<div class="list-row" ng-repeat="data in dataCollected">
<h3 class="name"> {{data.name}} </h3>
</div>
What am I missing?
Sorry guys, thank you for the help. The issue was that in an attempt to make my data easier to read, I had assigned names to the keys of the array using bracket notation as seen in the answer here: stackoverflow.com/questions/12244483/… ng-repeat does not like that at all. It seems the default keys are necessary.
Okay, I have a weird issue. I have an array of objects. Each object contains another array (of strings). I loop over the array of objects using ng-repeat. Within the repeated code I ng-repeat over the array of strings. For some reason, this nested ng-repeat only works when the array of strings contains but one (1) item. When there are more items, it simply doesn't work.
Code
Result of <pre>{{ answer.value | json }}</pre>
[
"Apothekerskast",
"Apothekerskast",
"Koelkast ombouw"
]
The view (in a gist because posting here causes issues with markdown): https://gist.github.com/fabdrol/898e4ac9760fc358ce81
The data (in JSON), for easy reading: https://gist.github.com/fabdrol/089467fa09dad6e89e81
It doesn't like duplicates, use track by $index:
ng-repeat="val in vals track by $index"
JSFiddle: http://jsfiddle.net/nedq13q2/