I'm trying to display all the .name and .info elements for actor and character objects shown below, using *ngFor.
I create the object here in my resultpage.component:
this.actorInfo = [{actor: res.actorInfo, character: this.characters}];
and here is my html for running through the elements in resultpage.html:
<div class="castMembers">
<div class="member" *ngFor="let item of actorInfo">
<span class="character">{{item.name}}</span>
<span class="actor">{{item.info}}</span>
</div>
</div>
The above code does not output any errors, but it also does not output any information. I believe this is due to the first element on the object being 0:. But trying *ngFor="let item[0] of actorInfo" causes major problems in Angular.
How can I display all the name and info items in my object?
You need to have two nested ngFor,
<div class="castMembers">
<div class="member" *ngFor="let item of actorInfo">
<div class="member" *ngFor="let actor of item.actorInfo ">
<span class="character">{{actor.name}}</span>
</div>
<div class="member" *ngFor="let character of item.character">
<span class="actor">{{character.info}}</span>
</div>
</div>
</div>
Try this:
<div class="castMembers">
<div class="member" *ngFor="let item of actorInfo">
<div style="width: 100%">
<div style="width: 50%; display: inline-block">
<span class="character" *ngFor="let actor of item?.actor">
{{actor.name}}
</span>
</div>
<div style="width: 50%; display: inline-block">
<span class="actor" *ngFor="let character of item?.character">
{{character.info}}
</span>
</div>
</div>
</div>
</div>
Related
I have 100 rows, I need to display in a popup. So, 50 rows should be displayed in left side of the popup and 50 rows should be displayed right side of the popup.
This is my HTML code that I have tried. But, I can not get two tables.
HTML Code
<div class="panel-body p0">
<ul ui-sortable="sortableOptions" ng-model="itemListArray" style=" list-style: none outside none; padding-inline-start: 15px; ">
<li class="featureContentBox-30" ng-style="{ 'cursor' : (sortableEventStart == true) ? 'all-scroll' : 'default' }" ng-repeat="dimension in (itemListArray | limitTo: totalShow.count) track by $index">
<div class="row p10">
<div class="col-sm-1">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="col-sm-2">
{{$index+1}}
</div>
<div class="col-sm-4">
{{dimension.valueName}}
</div>
<div class="col-sm-4">{{dimension.displayName}} </div>
<div class="col-sm-1" ng-click="removeDimension($index)"> x</div>
</div>
</li>
</ul>
</div>
Think in this way...
<div class="row">
<div class="col-6">
// left side
</div>
<div class="col-6">
// right side
</div>
</div>
I'm trying to display some json data I got from a get request. So far I've been able to display other arrays with no problem, but I'm having trouble displaying this particular array for some reason, and I'm not getting any errors.
the one that won't display correctly is the showtimes array.
<div *ngIf="show">
<div *ngFor="let shows of show"class="showtime">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{shows.title}}</h3>
</div>
<div class="panel-body" >
<div class="row">
<div class="col-md-7 col-sm-5 col-xs-12 ">
<img class="thumbnail movie_pic" src="http://developer.tmsimg.com/{{shows.preferredImage.uri}}?api_key={{api}}"><br>
</div>
<div class="col-md-5 col-sm-7 col-xs-12">
<ul class="list-group">
<li class="list-group-item">Genres: {{shows.genres}}</li>
<li class="list-group-rel">Release Date: {{shows.releaseDate}}</li>
<li class="list-group-rel">{{shows.longDescription}}</li>
<li *ngFor="let shows of show.showtimes" class="list-group-rel">shows.theatre.name</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
You are missing {{}} expression
<li *ngFor="let shows of show.showtimes" class="list-group-rel">{{shows.theatre.name}}</li>
EDIT
Change it to some other variable name, since you are already using shows,
<li *ngFor="let showdetail of show.showtimes" class="list-group-rel">{{showdetail.theatre.name}}</li>
As it looks from your snapshot, the array of objects is stored in variable showtimes, if that is the case, try the below code:
<li *ngFor="let detail of showtimes" class="list-group-rel">
{{detail.theatre.name}}
</li>
A nested ngFor loop solved the problem..
<div *ngFor="let shows of show">
<div *ngFor="let detail of shows.showtimes">
<p>{{detail.theatre.name}}</p>
</div>
</div>
works perfectly, thanks for the help
I have a bit of bootstrap HTML code with an ng-repeat inside of it.
<div class="row">
<div class="col-lg-4" ng-repeat="p in persons">
<img class="img-circle" src="images/{{ p.image }}" width="140" height="140">
<h2>{{ p.name }}</h2>
<p>{{ p.description }}</p>
<p><a class="btn btn-default" href="#/quotes/{{ p._id }}" role="button">Quotes »</a></p>
</div>
</div>
Now the thing is that I would like to close the last </div> after that we iterated through 3 elements. I also would like to start a new <div class="row"> at this point.
I tried to create this with an ng-if (ng-if: $index + 1 % 3 == 0, index reflects on the index number of the iteration at that point), but the issue is that I can only show or hide pure HTML content with this and no tags.
UPDATE
I almost found a fix:
<div class="row">
<div ng-repeat="p in persons">
<div class="col-lg-4">
<img class="img-circle" src="images/{{ p.image }}" width="140" height="140">
<h2>{{ p.name }}</h2>
<p>{{ p.description }}</p>
<p><a class="btn btn-default" href="#/quotes/{{ p._id }}" role="button">Quotes »</a></p>
</div>
<div class="clearfix visible-lg-block" ng-if="($index+1)%3==0">.</div>
</div>
</div>
If I use this code (with the clearfix added), all the elements are displayed nice and neat. The only issue is that if I remove the dot '.' that is inside the div, it doesn't work anymore. It seems like you need some kind of 'content' inside the tags to let it work. Any ideas?
Thanks in advance!
-Jérémy
I found the fix for my problem.
Code:
<div class="row">
<div ng-repeat="p in persons">
<div class="col-lg-4">
<img class="img-circle" src="images/{{ p.image }}" width="140" height="140">
<h2>{{ p.name }}</h2>
<p>{{ p.description }}</p>
<p><a class="btn btn-default" href="#/quotes/{{ p._id }}" role="button">Quotes »</a></p>
</div>
<div class="clearfix visible-lg-block" ng-if="($index+1)%3==0"></div>
</div>
</div>
In my use case I would like append elements to the respective object in each iteration which is generated dynamically. It is appending to the end of all objects. Here is my code,
HTML:
<div class="comment-list-new" style= "max-height: 660px !important;overflow-y: scroll;">
<h5>Discussion Board</h5>
<ol class="question_ol" >
{{ if .ViewData.Questions }}
{{ range .ViewData.Questions }}
<li>
<input type="hidden" id="question_id" class="question_id_val" value="{{.QuestionId}}"/>
<div class="q-comment">
<div class="qanda questiondiv" id="questionarea" name="questionarea">
<div>
<div id="topic" class="upvote pull-left">
<a class="upvote"></a>
<span class="count">3</span>
<a class="downvote"></a>
</div>
<div >
<div class="qanda-info">
<h6><p id="quest_title">{{.QuestionTitle}}</p></h6>
</div>
<p id="quest_text">{{.QuestionText}}</p>
</div>
</div >
<div class="qanda-info">
<div class="user-info">
<img src="/resources/img/team-small-2.png" />
</div>
<h6>{{.UserId}}</h6>
<span class="date alt-font sub">{{.DateCreated}}</span>
<a id="answertext" name ="answertext" type="submit" class="link-text answerbutton">Answer</a>
</div>
</div>
</div>
</li><!--end of individual question-->
{{ if .Answers }}
<div class="form-input">
<label for="answers">{{len .Answers}} Answer(s)</label>
</div>
{{ range .Answers }}
<ul class="children">
<li>
<div class="q-comment">
<div class="qanda">
<div>
<div id="topic" class="upvote pull-left">
<a class="upvote"></a>
<span class="count">{{.Upvotes}}</span>
<a class="downvote"></a>
</div>
<div >
<p>{{.AnswerText}}</p>
</div>
</div>
<div class="qanda-info">
<div class="user-info">
<img alt="User" src="/resources/img/team-small-4.png" />
</div>
<h6>{{.UserId}}</h6>
<span class="date alt-font sub">{{.DateCreated}}</span>
</div>
</div>
</div>
</li><!--end of individual comment-->
</ul>
{{ end }}
{{ end }}
{{ end }}
{{ end }}
</ol>
</div><!--end of comments list-->
** And my JS code: **
$('.questiondiv').on('click', '.submitanswerbutton', function() {
console.log("In submit button");
date = "17 June 2015"
var howtiId = $('#howti_id').text();
var question_id = $(this).closest('li').find('.question_id_val').val();
var answer_text = $('.answertext_val').val();
console.log(howtiId);
console.log(question_id);
console.log(answer_text);
$.getJSON("/submitanswer?howti_id="+howtiId+"&question_id="+question_id+"&answer="+answer_text, function(data) {
console.log("answer Response "+data);
newAnswer = "<ul class='children'><li><div class='q-comment'><div class='qanda'><div><div id='topic' class='upvote pull-left'><a class='upvote'></a><span class='count'>3</span><a class='downvote'></a></div><div><p>"+answer_text+"</p></div></div><div class='qanda-info'><div class='user-info'><img alt='User' src='/resources/img/team-small-4.png' /></div><h6>{{.UserId}}</h6><span class='date alt-font sub'>"+date+"</span></div></div></div></li></ul>"
$('ol').append(newAnswer);
//$(this).closest('.comment-list-new').find('.question_ol').append(newAnswer);
});
$(this).closest('.answersectiondiv').remove();
});
I am trying append answer to the respective question. But it is appending to the last question.
Could someone help me with this?
Firstly add a container div under the questions_ol div to include every question with its answers, give it the class question_and_answers, make sure it's under the loop.
Then use jquery selectors with $(this) to reach the relative answers list. Instead of:
$("ol").append (...
Use:
$(this).closest ('.question_and_answers ').append (...
I've got a simple chat app in AngularJS, and I'm sending a message to the view which is being outputted on the front end like this:
<div id="messages" class="col-xs-12 chat-messages">
<div class="col-xs-12 chat-message" ng-repeat="message in chatMessages">
<div class="you">
<ul class="media-list">
<li class="media">
<div class="media-left">
<div class="media-object img-circle" style="background-image: url( {{message.avatar_url}} )"></div>
</div>
<div class="media-body">
<div class="media-heading text-muted small">
{{message.nickname}}
</div>
<div class="message-content bubble">
{{message.content}}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
At the moment I am just going through the chatMessages array and outputting them using this div. I have given each message another attribute of kind where I will send to the view different kinds of messages, such as userMe, userOther, global etc. and I will need to use a slightly different HTML markup for each kind of message. I understand that this should be done using ng-if in AngularJS, but I don't quite know how to go about this.
From the view, I will need to output some different HTML depending on the message.kind value.
Any ideas?
If you have several possible div options for each element, I'd use ng-switch, like Tom said in the comments.
The idea is that you switch on the message.kind, or whatever you want to switch on, and have each div as a "Case" for that:
It would look something like this:
<div class="media-body" ng-switch="message.kind">
<div class="media-heading text-muted small" ng-switch-when="1">
{{message.nickname}}
</div>
<div class="message-content" ng-switch-when="2">
{{message.content}}
</div>
<div class="message-content bubble" ng-switch-default>
default text
</div>
</div>
Fiddle
You have two solution to archieve what you want :
<div ng-repeat="msg in messages">
<div ng-if="msg.kind === 'userMe'">userMeMessage</div>
<div ng-if="msg.kind === 'global'">globalMessage</div>
...
</div>
Or this :
<div ng-repeat="msg in messages|filter:{kind:'userMe'}">
UserMe
</div>
<div ng-repeat="msg in messages|filter:{kind:'global'}">
Global
</div>