I wanna show json data in the client . If server sends an array, it can be handled by *ngfor="item of items", but server can send one row json that can not be implemented with *ngfor, because with *ngfor we can just have an array.
How can implement conditional *ngfor:
<div *ngFor="let item of (Array.isArray(items) ? items : [items])
I want to check items variable , if it is array type, items should be used as an array , otherwise one row jason
Thanks in advance
I would suggest you to create two divs with *ngIf statement, and use ngFor in case server returns an array.
<div *ngIf="Array.isArray(items)" *ngFor="let item of items">{{item}}</div>
<div *ngIf="!Array.isArray(items)">{{items | json}}</div>
It gives better understanding from first sight what is going on in code. Hope it will help
Thanks for your help.
As you recommend I tried following code and it works
<div [ngSwitch]="items.length > 0">
<div *ngSwitchCase="true">
<div *ngFor="let item of items">
<md-checkbox
[checked]= "item[valueKey] == trueValue"
[disabled]="disabled"
align="start"
(change)="onChange($event,item,valueKey)"
(onInputFocus)="onFocus()">
{{item[labelKey]}}
</md-checkbox>
</div>
<md-checkbox
[checked]= "items[valueKey] == trueValue"
[disabled]="disabled"
align="start"
(change)="onChange($event,items,valueKey)"
(onInputFocus)="onFocus()">
{{items[labelKey]}}
</md-checkbox>
</div>
Related
This is my array which have property message which have another array.
chat = [{id:1, toUser:10, fromUser:11, seen:null, name:'Filip', messages:[{message:'Hello'},{message:'Hello again'}]}];
This is my HTML
<div *ngFor="let c of chat">
<h1>{{c.name}}</h1> //this works fine
<p>{{c.messages.message}}</p> //There I cant get anything. If I set c.messages[0].message I only get first result
</div>
Use a second nested ngFor. Something like:
<div *ngFor="let c of chat">
<h1>{{c.name}}</h1>
<p *ngFor="let item of c.messages">{{item.message}}</p>
</div>
I have two arrays of strings. One of those will be a dynamic list of checkboxes. I want to check if the item exists in the other array. How can I do it dynamically using angular 6?
This is the current situation of the list of checkboxes...
The checked need to be dynamic...
<div *ngFor="let p of people">
<mat-checkbox class="example-margin secondary-text"
[checked]="false" >p</mat-checkbox>
</div>
You could do something like this if you want to check the items which are also existing inside the otherArray. This is assuming that these arrays are string arrays as you mentioned.
// In the template
<div *ngFor="let p of people">
<mat-checkbox class="example-margin secondary-text"
[checked]="isInOtherArray(p)" >p</mat-checkbox>
</div>
// In the component method
public isInOtherArray(person) {
return this.otherArray.indexOf(person) > -1;
}
Or you could directly use it on your template
<div *ngFor="let p of people">
<mat-checkbox class="example-margin secondary-text"
[checked]="otherArray.indexOf(p) > -1" >p</mat-checkbox>
</div>
Is there a way to use 1 instead of 0 for $index in ng-repeat as the initial item? Im not trying to filter out the first item in the array. It is for paypal they want the first to be item_num_1... using 0 doesnt work
as in
<div ng-repeat = "item in items">
<input type ="hidden" name ="item_num_{{$index}}" value ="item_num_{{item.id}}">
//the rest like this
</div>
Maybe you can try this. I am not sure if it works though. Good luck
<div ng-repeat = "item in items track by $index">
<input type ="hidden" name ="item_num_{{$index + 1}}" value ="item_num_{{item.id}}">
//the rest like this
</div>
Why not to do just
{{$index+1}}
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.
I used ng -repeat in my demo .But due to large data coming from service .I want to use collection-repeat for performance better .how I will use collection-repeat to get the same out put here .here is my plunker
<ion-scroll scrollbar-y="true" delegate-handle="i" ng-style="viewHeight">
<div class="row" ng-repeat="column in i | limitTo: counter track by $index" ng-class-odd="'odd-row'">
<div class="col brd collapse-sm" ng-repeat="field in column.columns" ng-show="i[$index].checked && i[$index].f===field.fieldNameOrPath">{{field.value}}</div>
<div class="col col-10 text-center brd collapse-sm"></div>
</div>
</ion-scroll>
<ion-infinite-scroll immediate-check="false" on-infinite="loadMore(query)" distance="10%"></ion-infinite-scroll>
here I am trying to use collection repeat like that
But not getting same result
can we use thin grid view ?
Hopefully you were able to find the answer by now but just in case, hopefully this will help...
Collection repeat does not support "limitTo: counter track by $index"
Please let me know if you are still having issues.