I can not believe that i am unable to do the simple following object made up of two arrays
{"M":
[
"Alpha",
"Beta",
"Zeta"],
"F":
[
"Alpha",
"Omega"
]}
All i want to do is have a nested ng-repeat like the following
<a
class="list-group-item list-group-item-info"
ng-repeat="(key,list) in vm.result">
{{key}}
<a
class="list-group-item"
ng-repeat="name in list">
{{name}}
</a>
</a>
any one has any idea why it does not work.
It shows the key properly, but fails to iterate in the list and hence the name is not shown and no errors are shown in the console either
thanks
bottom line of your problem:
https://www.w3.org/TR/html401/struct/links.html#h-12.2.2
nested links are illegal
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.
Change your outer element to a <div> or <span> and it works
Related
I get a lot of data coming from an API, and among that data, I have these images:
Photos: "uploads/60bcb8f0244b2.png,uploads/60bcb8f025427.png"
I used *ngFor to present all the data that exists, "Photos" is one of them. My question is, how can I separate the link from this "Photos" field? Note that it currently has a comma separator. I can't use split(',') inside *ngFor. What would be the solution?
You can try split(",") as below
<ul>
<li *ngFor="let item of data">
{{item.text}}
<div *ngFor="let p of item.photos.split(',')">
{{p}}
</div>
</li>
</ul>
Here is example for you: https://stackblitz.com/edit/angular-ivy-i92axf?file=src/app/app.component.html
I'm trying a simple AngularJS looping using 'ng-repeat' directive as below :
<div ng-app="" ng-init="numbers=[1,3,5,2]">
<ul>
<li ng-repeat="item in numbers">{{ item }}</li>
</ul>
</div>
The result of this is as below, which is perfect
1
3
5
2
However, when I change the 'numbers' array like this
<div ng-app="" ng-init="numbers=[1,3,5,2,2]">
being the rest as is, it does not work.
The only change I have made is that I've added one more item in the 'numbers' array '2'. The issue I figured out is whenever an item is repeated in the array ( '2' in this case ), the problem occurs.
The console log I noticed is like below
Error: [ngRepeat:dupes] http://errors.angularjs.org/1.3.14/ngRepeat/dupes?p0=item%20in%20numbers&p1=number%3A2&p2=2
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417
at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:232:494
at Object.fn (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:122:53)
at l.$get.l.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:123:138)
at l.$get.l.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:126:58)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:17:479
at Object.e [as invoke] (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:36:315)
at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:17:400)
at tc (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:18:179)
Also, if the array is of string type values, the same problem persists too.
For example, <div ng-app="" ng-init="names=['Bishnu', 'Sagar', 'John', 'Bishnu']">
in this case also I'm facing the same issue.
This behavior of AngularJS is very strange.
Does anyone know the reason, and how to resolve?
Try this...
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.
ngRepeat makes the corresponding changes to the DOM
When an item is added, a new instance of the template is added to the DOM.
When an item is removed, its template instance is removed from the DOM.
When items are reordered, their respective templates are reordered in the DOM.
By default, ngRepeat does not allow duplicate items in arrays. This is because when there are duplicates, it is not possible to maintain a one-to-one mapping between collection items and DOM elements.
If you do need to repeat duplicate items, you can substitute the default tracking behavior with your own using the track by expression
<div ng-repeat="n in [42, 42, 43, 43] track by $index">
{{n}}
</div>
Refer:https://docs.angularjs.org/api/ng/directive/ngRepeat
As per the Angular Docs Duplicates are not allowed. You need to use 'track by' expression to specify unique keys.
Created this Plnkr for your reference
<div ng-app="" ng-init="numbers=[1,3,5,2,2]">
<ul>
<li ng-repeat="item in numbers track by $index">{{ item }}</li>
</ul>
</div>
You need to use track by $index to iterate through duplicate entry as well.
you can try like this
<div ng-repeat="value in [4, 4] track by $index">{{value}}</div>
I have an object I am trying to ng-repeat through.
The object is something like this:
ctrl.obj = {
"1": ["val1", "val2", ... ],
"3": ["val1", "val2", ... ],
...
"20": ["val1", "val2", ... ]
}
When I try:
<ul ng-repeat="item in ctrl.obj"></ul>
I get this angular error:
Error: ngRepeat:dupes
Duplicate Key in Repeater
The standard solution is to use track by $index. That does not work for my scenario though, because it now causes every integer between 0 and 20 to appear, even though I only have 1, 3, 7, 10, etc. I would ideally not like to reformat the object, as it is being loaded from outside the app ~ though this seems to be a recurring necessity with Angular.
What are my options for repeating through this object?
This object is a dictionary, where each property is a key, and each array is a value. To iterate through this properly, you would need two separate ng-repeat. something like the following:
<div ng-repeat="(key, value) in ctrl.obj">
{{key}} : {{value}}
<div ng-repeat="item in value">
{{item}}
</div>
</div>
There may be something else going on here, because I am unable to reproduce the error you are experiencing when using this syntax, though you state that the syntax causes an error in your situation. Can you post a sample of data which actually does cause this error?
http://plnkr.co/edit/LvvpxNqM6LuGVel4WQt9?p=preview
This plunker is using your original <ul>, and it is not producing any of the errors you are describing. It seems as though you haven't provided an accurate representation of the object you are trying to display here.
http://plnkr.co/edit/xgded2Ebrf0xKFuupOyr?p=preview
https://docs.angularjs.org/api/ng/directive/ngRepeat
So,
I am rendering a basic list using ngRepeat, but need the first <li> to be static content, rather than being generated from the data array:
e.g.
<ul ng-repeat="item in items">
<li>This is text from the template and will always be the same.</li>
<li>{{item}}</li>
</ul>
I've also looked at using ng-repeat-start, but just can't quite get to a solution.
It is a common misconception that people want to use ng-repeat on the parent element, when in fact you use it on the actual elements that do the repeating.
You just need to change it to:
<ul>
<li>This is text from the template and will always be the same.</li>
<li ng-repeat="item in items">{{item}}</li>
</ul>
I have an array of 3 items and want them to be "ng-repeated"
<li ng-repeat="item in obj.items id="testobj{{testobj.number}}">
</li>
When I look at the page, it appears that the id of the "li" is just "testobj" for all 3 items and not testobj1 testobj2 testobj3 like I was expecting. What is the issue?
Your ng-repeat attribute is missing a final ".
The {{ }} binding is probably coming back with no data and so being treated as if it was an empty string. I see no reference to testobj (the scope variable) anywhere outside of your binding. Is this defined, or should your id read id="testobj{{item.number}}" or something similar?