Angular 5 loop array - arrays

I am really a beginner in angular ionic and stuff. Here, my problem is I have tried using *ngFor to iterate someArr and pass to [something]="" but my page became blank after adding it. Can someone help me.
someArr = [1, 2, 3, 4, 5, 6]
<ion-content>
<myHeader *ngIf="qArr.length && qArr[cPg].letter === 'A'" [something]="">
</myHeader>
<myHeader *ngIf="qArr.length && qArr[cPg].letter === 'B'" [something]="">
</myHeader>
</ion-content>

When using ngFor you are creating local variable based on a class variable so you will have something like :
<div *ngFor="let item of someArr"></div>
where someArr is the class var = [1, 2, 3, 4, 5, 6]
So inside your div, you will have access to each item using this :
<div *ngFor="let item of someArr">
<p *ngIf="item === myFunction(item)"> {{ item }} </p>
</div>

Can you show what you've tried with ngFor?
Should looks something like this
<div *ngFor="let val of someArr">
{{val}}
</div>
Sidenote, you cannot combine ngFor and ngIf inside same tag
meaning this will not work
<div *ngFor="let val of someArr" *ngIf="val === 1">
{{val}}
</div>
But this would work
<div *ngFor="let val of someArr">
<div *ngIf="val === 1">
{{val}}
</div>
</div>
Update
something is not a real attribute, so we have no idea what you're refering to.
However you should be able to assign values to attribute. Take id attribute for instance
<div *ngFor="let val of someArr">
<div [id]="val">
{{val}}
</div>
</div>

Related

How to iterate over arrays in angular 12?

I am trying to iterate over an object that's in an array of an array, however, I'm not able to display the data in the front-end.
I tried this method:
<div *ngFor="let item of events of event | keyvalue">
{{item.key}}:{{item.value}}
</div>
and this one:
<div *ngFor="let item of events of event | json">
Test: {{item}}
</div>
The structure of the JSON data is given in this format.
[
[
{
"age": "age3",
"gender": "gender3"
},
{
"age": "age3",
"gender": "gender3"
}
]
]
You'll have to iterate through each internal array as well, so you'll need a nested *ngFor. Make sure to reference the correct item array in your nested *ngFor.
<div *ngFor = "let item of events">
<div *ngFor = "let x of item">
{{x.age}}:{{x.gender}}
</div>
</div>
It looks likes a nested array, try using multiple ngFor:
<div *ngFor="let event of events">
<div *ngFor="let item of event">
Test: {{item | json}}
</div>
</div>
Otherwise you could try using Array.prototype.flat to flatten the nested array:
this.flattened = this.events.flat();
// ...
<div *ngFor="let item of flattened">
Test: {{item | json}}
</div>
<ng-container> is fine when you want structural logic without polluting the DOM with useless elements.
<ng-container *ngFor="let subArray of array"> <!-- This does not appear in the DOM -->
<div *ngFor="let item of subArray"> <!-- This appears in the DOM -->
{{item.key}}:{{item.value}}
</div>
</ng-container>

Cannot print current value in ng-repeat

Here is my code:
codepen.io/bedtvapp/pen/NMoBby
<div ng-app="app">
<h1>AngularJS Directive Controllers</h1>
<div ng-init="count1 = 1"></div>
<div ng-repeat-start="a in [1, 2, 3, 4, 5]" ng-init="$parent.count1 = $parent.count1 + 1"></div>
<div>
abc {{ a }} - {{::$parent.count1}} </div>
<div ng-if="$parent.count1 % 2 == 0">breakline</div>
<div ng-repeat-end></div>
</div>
I want to count item in array into custom variable (count1) (not $index). Because I will add more condition to my counting later.
If you just want to print count then just do following changes in your code
<div ng-app="app">
<h1>AngularJS Directive Controllers</h1>
<div ng-repeat-start="a in [1, 2, 3, 4, 5]" ></div>
<div>
abc {{ a }} - {{$index + 1}} </div>
<div ng-repeat-end></div>
</div>
You no need to do any initalization thing
If you increment count1 in ng-repeat-start init, end of the repeat count1 have the same value. So you need to get the help of $index. You can use count1 for the set starting value.
You can simply achieve your target using bellow code
<div ng-init="count1 = 1"></div>
<div ng-repeat-start="a in [1,2,3,4,5]" >
abc{{a}}- {{count1+$index+1}}
</div>
<div ng-if="(count1+$index+1) % 2 == 0">breakline</div>
<div ng-repeat-end></div>
output like this,
abc1- 2
breakline
abc2- 3
abc3- 4
breakline
abc4- 5
abc5- 6
breakline
If you want to add more condition you need based on (count1+$index+1) value.

Angularjs ng-repeat iterate by 2

I have a for loop in my MVC application like this
for(var i = 0; i < data.length; i +=2){
<div class='#(i== 0? "item active": "item")'>
<div>
#Html.Raw(data[i].Description)
</div>
<div>
#Html.Raw(data[i + 1].Description)
</div>
</div>
}
I want to convert the above code in angularjs.
Means every loop render the record from current and next array index, say i = 0 then render first and second record detail.
Actually it is big object, for clarity I reduce the code, I want to write the same code in ng-repeat
See the fiddle
I end up with a dirty trick:
<div ng-repeat="item in data"
ng-class="{active: $first}" class="item row"
ng-if='$index % 2 == 0'>
<div class='col-lg-6'>{{ item.a }}</div>
<div class='col-lg-6'>{{ data[$index + 1].a }}</div>
</div>
If $index % 2 == 0 only then render, means 0, 2, 4 .. it work as I want.
See to codepen.
You essentially want something like this:
<div ng-repeat="dataEntry in data" ng-class="{active: $first}" class="item">
<div>{{ dataEntry.Description }}</div>
<div ng-if="!$last">{{ data[$index + 1].Description }}</div>
</div>
Use ng-repeat to loop over your data entries
Use ng-class to only apply 'active' class to the first entry (you have access to $first, $last, $even, and $odd, (which are booleans) inside of an ng-repeat scope)
dataEntry represents each entry for each iteration of your data. Use {{ }} to access and render it's contents
You can use $index + 1 to grab the next entry in the array of entries.
I would assume you know that data in this scenario has to be attached / accessible from your $scope.

How to bind array with ng-bind-html directive in angularJS?

I want to show for every item different description.
This is the controller:
todoApp.controller('todos',function($scope,todoFactory){
todoFactory.getTodos().success(function (data) {
courses = x2js.xml_str2json(data);
$scope.todos = courses.rss.channel.item;
for(var i = 0 ; i < $scope.todos.length ; i++){
item = $scope.todos[i];
console.log(item.description);
$scope.message = item.description;
}
});
this is the html:
<div ng-controller="todos" class="list" style="padding-top: 8%">
<div class="list card" ng-repeat="todo in todos | filter:search" >
<div class="item item-avatar" ng-click="openLink(todo.link)" >
<img src="Bla-Bla-Logo-1.png">
<h2>{{todo.title}}</h2>
<p>{{todo.pubDate | limitTo:25 }}</p>
</div>
<div class="item item-body">
<p ng-bind-html="message"></p>
<p>
1 Like
5 Comments
</p>
</div>
</div>
<!--end list card-->
</div>
<!--end todos-->
Just to explain the code I get xml and convert into json so todos is array of objects.
Message is entering every object and get the description (but in the description has tags so i use ng-bind-html directive to show it properly).
I understand that $scope.message will hold just the last description. How to make it to belong in the ng-repeat so I can get different description for different item?
Thanks.
replace
<p ng-bind-html="message"></p>
with
<p ng-bind-html="todo.description"></p>
please provide the data which is you want to displayed repeatedly.
How data is represented.You are getting last one because it is overriding.
The "ngBind" attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
Typically, you don't use "ngBind" directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

How to pass a variable from view to scope using ngRepeat

I'm making a browse page where users can see the top terms for my site's search facets (I'm using ElasticSearch/Tire.) I created an array of objects with a title and arguments in the format I need for search. I want to iterate through the array and display the title and then the results of my search for each facet. At first I tried using a for loop in the controller to iterate through facet_selections, but that didn't seem like the Angular way. So now I'm trying to use ng-repeat for the iteration, but I'm not sure how to pass the arguments from the view to the controller. I read through all the directives, and I don't see a good fit, which makes me think I might be on the wrong path all together.
Here is a simplified controller:
$scope.facet_selections=[{name:"Collection", value: "collection_title", term: "collectionTitle"}, {name:"Series", value: "series_title", term: "seriesTitle"}, {name:"Episode", value: "episode_title", term: "episodeTitle"},];
$scope.frequency=Frequency.query({facet: facet}).then(function(data) {
$scope.topterms=data.facets[term].terms;
})
And here's the html:
<div class="browse" ng-repeat="object in facet_selections" ng-init="var term={{object.term}}">
<h4> {{object.name}} </h4>
<ul>
<li ng-repeat="term in topterms"> {{term.term}} ({{term.count}})</li>
</ul>
</div>
The problem is that you can't bind the html to a promise. You have to wait for the promise to resolve then update the scope. So I would handle the initial loop in the controller, not with an ng-repeat.
$scope.facet_selections=[{name:"Collection", value: "collection_title", term: "collectionTitle"}, {name:"Series", value: "series_title", term: "seriesTitle"}, {name:"Episode", value: "episode_title", term: "episodeTitle"},];
for(var i; i < $scope.facet_selections.length; i++){
var selection = $scope.facet_selections[i];
Frequency.query({facet: selection.value}).then(function(data) {
$scope.facet_selections[i].results = data.facets[selection.term].terms;
$scope.$digest() // hook into the angular binding system
});
}
then
<div class="browse" ng-repeat="facet in facet_selections">
<h4> {{facet.name}} </h4>
<ul>
<li ng-repeat="term in facet.results"> {{term.term}} ({{term.count}})</li>
</ul>
</div>
Passing arguments from the view to the controller is extremely easy:
$scope.numbers = [0, 4, 5, 2];
$scope.getTimesTwo = function(num){
return num * 2;
};
then
<div ng-repeat="num in numbers">
{{num}} <span>{{getTimesTwo(num)}}</span>
</div>
will result in
<div ng-repeat="num in numbers">
0 <span>0</span>
</div>
<div ng-repeat="num in numbers">
4 <span>8</span>
</div>
<div ng-repeat="num in numbers">
5 <span>10</span>
</div>
<div ng-repeat="num in numbers">
2 <span>4</span>
</div>
Its just that that is not really your problem, its promise resolution hooking to the $digest cycle

Resources