Trying this:
<div ng-repeat="store in something111.company2.store">
{{store.name}}
<div ng-repeat="section in something111.company2.store.section">
{{section.name}}
</div>
</div>
Getting this:
DePere
Green Bay
This is my user.company2:
{
"_id":"5473fc8c14034efd3c2b3d58",
"name":"Festival",
"__v":0,
"store":[{
"_id":"5473fc8c14034efd3c2b3d59",
"name":"DePere",
"__v":0,
"section":
[{
"_id":"5478b54c945d4c00001aa5f9",
"name":"Deli",
"__v":0}]},
{
"_id":"54747f498e16571b6049e266",
"name":"Green Bay",
"__v":0,
"section":
[{
"_id":"547930057f7aa70000ee568f",
"name":"Produce",
"__v":0}]}]}
Produce should be showing up under Green Bay and Deli should be showing up under DePere, but they're not. company2.store works but company2.store.section doesn't... or something's wrong with the ng-repeat.
What should I do to fix it? Thanks!
For inner ng-repeat, begin the 'path' at the point where you finish the outer one:
<div ng-repeat="store in something111.company2.store">
{{store.name}}
<div ng-repeat="section in store.section">
{{section.name}}
</div>
</div>
In this case, inner ng-repeat will iterate over the collection stored in section property of every element of array stored in user.company2.store. Currently, you're trying to access user.company2.store.section directly - and fail, because there's no such property as section in user.company2.store array.
Related
I'm using Angular 4 and I want to loop through an array of objects and display the information in Angular Material grids tiles. My html (app.component.html) looks a bit like this
<div class="list" *ngIf="listContacts == true">
<mat-grid-list cols="3" rowHeight="2:1" *ngFor="let i of contacts">
<mat-grid-tile>
<div class="card">
<img src={{contacts[i].image}} alt="picture">
<h2>{{contacts[i].name}}</h2>
</div>
</mat-grid-tile>
</mat-grid-list>
</div>
And contacts is an array of objects inside app.component.ts. There are NINE objects within contacts but for simplicity I've only put two here.
export class AppComponent {
// array of contact objects
contacts = [
{
name: "Robbie Peck",
image: "src/assets/robbie.jpg",
},
{
name: "Jenny Sweets",
image: "src/assets/jenny.jpg",
},
...
]
}
So rather than have nine different 's appear, each with their own information (looping i through contacts), I only have one and the console shows an error where it doesn't recognize contacts[i]. What have I done wrong? How can I get the to have 9 's, each with name and image i within the contacts object in the typescript (app.component.ts) file?
You don't have to pass the index, you can just use the variable i and access i.image and i.name
<mat-grid-list cols="3" rowHeight="2:1" *ngFor="let i of contacts" >
<mat-grid-tile>
<div class="card">
<img src={{i.image}} alt="picture">
<h2>{{i.name}}</h2>
</div>
</mat-grid-tile>
I am trying to show the value from my json files using ng-repeat in angular js but I am unable to do that.
This is my code which I am trying:
<div ng-repeat = "x in myWelcome.definition">
{{x.attributes[0].children[0].node_id}}
<hr>
</div>
I have tried this and it is working:
<!-- first attributes start -->
<div ng-repeat = "x in myWelcome.definition.attributes">
{{x.rm_attribute_name}}<hr>
<div ng-repeat="a in x.children">
<div ng-if ="a.attributes">
a: {{a.attributes[0].rm_attribute_name}}
<div ng-if= "a.attributes[0].children">
chld
</div>
</div>
</div>
</div>
<!-- second attributes end -->
I am trying to understand how this line is working {{a.attributes[0].rm_attribute_name}} why it is not working like this {{a.attributes1.rm_attribute_name}} this is confusing. How it is shwoing all the results when I am using 0 and index.
And my json file is here in the plunker:
Plunker link of json and code
So how can I iterate here using ng-repeat here this code:
{{myWelcome.definition.attributes[0]}}
is working how can I show this in my view using ng-repeat I need to show all the attributes and child using ng-repeat.
ng-repeat can be used in the following way:
<div ng-repeat = "(key,value) in myWelcome.definition.attributes">
Key:{{key}} and value :{{value}}
<hr>
</div>
OR you can Try this:
<div ng-repeat = "x in myWelcome.definition.attributes">
<div ng-repeat="a in x.children">
a:{{a.node_id}}
</div>
</div>
Edited Plunker
I can see you are trying to implement ng-if and ng-repeat for your json file. You need to understand how ng-repeat works you can always check the index of you array using {{$index}}. So for your kind of problem I think this is the solution you should try.
<!-- first attributes start -->
<div ng-repeat = "x in myWelcome.definition.attributes">
{{x.rm_attribute_name}}<hr>
<div ng-repeat="a in x.children">
{{$index}}
<div ng-if ="a.attributes">
<div ng-repeat="b in a.attributes">
<hr>
{{b.children.length}}
<div ng-if="b.children.length > 1">
If the array is more than 1 please do the magic here
</div>
</div>
<div ng-if= "a.attributes[0].children">
chld
</div>
</div>
</div>
</div>
<!-- second attributes end -->
You can always see the indexes using {{$index}} and you should always use .length to check if it has more than 1 value. This way you can achieve what you want and you should also learn something about arrays in javascript and what is the differnece between dot and bracket. Please read this http://www.dev-archive.net/articles/js-dot-notation/. I think you should learn the basics of javascript.
I am making a simple demo of nested ng-repeat with some condition.it is not printing any values why ?
Actually I am trying to get below result after iteration of two objects
Expected result
ght nor
abc pqr
code pen or plunker
\
<ion-scroll scrollbar-y="true">
<div class="row rowclass" ng-repeat="column in a ">
<div class="col brd text-center collapse-sm columnCss" ng-repeat="field in column.columns" ng-show="b[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
</div>
</ion-scroll>
Actually I have two object ..having one key inside I need to show those value which is equal .but i am not getting expected result why ?
You need to update
ng-show="b[$index].fieldNameOrPath===field.fieldNameOrPath"
to
ng-show="b[$index-1].fieldNameOrPath===field.fieldNameOrPath"
And in your json, fieldNameOrPath property is different in a and b like in a it is "Sub" and in b it is "Subject", so either update a or b, so that property fieldNameOrPath is same at both the places.
Here is the answer with example.
Also in script.js file i have corrected some type mistakes.
ng-show="b[$index-1].fieldNameOrPath===field.fieldNameOrPath"
While it is technically possible to do this with your current data set, I'd very much recommend changing your data model to look something like this:
$scope.dataRows = [
{
ID: "00TK000000INaMXMA1",
Subject: "ght",
Priority: "normal"
},
{
ID: "00TKabc",
Subject: "abc",
Priority: "pqr"
}
];
And your HTML to something like this:
<ion-scroll scrollbar-y="true">
<div class="row rowclass" ng-repeat="row in dataRows">
<div class="col brd text-center collapse-sm columnCss">
{{row.Subject}}
</div>
<div class="col brd text-center collapse-sm columnCss">
{{row.Priority}}
</div>
</div>
</ion-scroll>
However, if for some reason this just isn't possible (data feed from some other place etc), then here is how I fixed your table issues:
1 : your fieldNameOrPath attributes didn't match (one was "Pri" and "Sub" and the other was "Priority" and "Subject").
2: You will need to add another ng-repeat unfortunately. Your indexes don't line up correctly because you have 3 fields in your data and 2 in your data columns. I've made a Plnkr fork for you that solves your problem (minus some css styling stuff) but I'd only recommend using it if you cannot change your data model.
http://plnkr.co/edit/3K3zKenGHG4hARkXmUTp?p=preview
I'm using the angular-isotope plugin to repeat multiple quotes in a masonry grid. My goal is to add multiple unique tags to each quote with each tag having its own unique filter class so that when you click the tag, only tags from that filter appear. Currently, the functionality works fine with just a single tag:
HTML:
<div class="quotes js-masonry" isotope-container="isotope-container">
<div class="quote-col {{item.class}}" ng-repeat="item in quotes" isotope-item="isotope-item">
<div class="quote-single">
<div class="quote-quote">"{{item.quote}}"</div>
<div class="quote-author">
<a class="filter-click" data-filter="{{item.dataFilter}}">- {{item.author}}</a>
</div>
<div class="quote-bottom clearfix">
<span class="quote-share">
<img src="img/icons/facebook.png">
<img src="img/icons/twitter.png">
</span>
<span class="quote-tags" ng-repeat="?">
<a class="filter-click" data-filter="{{item.tagFilter}}">{{item.tag}}</a>
</span>
</div>
</div>
</div>
Angular Controller:
var demo = angular.module('angular-isotope-demo', []);
demo.controller('QuoteController', function QuoteController($scope) {
$scope.quotes = [
{
"quote":"It is better to lead from behind and to put others in front, especially when you celebrate victory when nice things occur. You take the front line when there is danger. Then people will appreciate your leadership.",
"author":"Nelson Mandela",
"tag": [
"Leadership",
"Second Class"
],
"class":"mandela leadership",
"dataFilter": ".mandela",
"tagFilter": [
".leadership",
".second-class"
]
}
]
});
My question is, how do I repeat that item tag (i.e. "Leadership", "Second Class") and attach it to that ".second-class" in the tagFilter so it looks like this?:
I hope this is clear to understand.
You will likely have a nested ng-repeat. So turn your quote.tag element into an array and do something like this:
<div ng-repeat="tag in item.tags">
<a class="filter-click" data-filter="{{tag.filter}}">{{tag.tag}}</a>
{{ $last ? '' : ( $index < item.tags.length-2 ) ? ', ' : '' }}
</div>
If you wish to have different classes for each item, then I would have another element within item.tags, say item.tags.classes and then do this:
<a class="filter-click" ng-class="tag.classes" data-filter="{{tag.filter}}">{{tag.tag}}</a>
Your data will need to be restructured for this to work:
{
"quote":"It is better to lead from behind and to put others in front, especially when you celebrate victory when nice things occur. You take the front line when there is danger. Then people will appreciate your leadership.",
"author":"Nelson Mandela",
"tags": [
{
"tag":"Leadership",
"filter":".leadership",
"classes": "second-class"
}
],
"class":"mandela leadership",
"dataFilter": ".mandela",
}
<div ng-repeat="app in fields track by $index">
<span class="{{app.icon}}"></span>
<span ng-class="app.icon"></span>
</div>
var originalFields = [
{title: 'Text Field', icon: 'fa-pencil'},
{title: 'Multiple Choice'}
];
These classes are working correctly the first time
When i used something like this $scope.fields = angular.copy(originalFields);
Then it works sometimes, but doesn't work sometimes I get class="app.icon" instead of class="fa-edit"
I even tried using $scope.$apply(); after copying, but it doesn't work
value in app.icon = "fa-edit"
What am i doing wrong?
<div ng-repeat="app in fields">
<span class="{{app.icon}}"></span>
<span ng-class="app.icon"></span>
</div>
I have removed the track by $index It is working fine.
When First element got deleted it is copying second element's properties when using track by $index, My first element icon property is being overridden by second element. Second element doesn't have icon property.
Strange!!