<div class="col-md-4">
<ul class="list-group text-left">
<a href="#" class="list-group-item" ng-click="selectedIndex = $index" ng- repeat="field in Data">
{{ field.name }}</a>
</ul>
</div>
<div class="col-md-8">
<div ng-show="selectedIndex == $index" ng-repeat="field in Data">
<div class="panel panel-primary" ng-repeat="scenario in field.scenarios track by $index">
<div class="panel-heading ">
{{ scenario.name }}
</div>
</div>
</div>
I need to select the field.name in href to display the corresponding selected field as a block in same page. But it is always redirecting to # and there is no data to display.
Please advice is it possible to display the value for the selected field in same page.
Related
I'm making a checkbox where every user presses the checkbox, then the contents of the checkbox will appear in the list section :
as shown here
the problem is the checkbox that works is only the first checkbox in the list and every time the user presses the checkbox, the content that shown in the list is only the last data in the database.
here is my code :
#foreach($users as $user)
<ol class="list-group" >
<div class="card">
<li class="list-group-item group-containers">
<div class="row">
<input onclick="checkBox(this)" class="form-check-input" type="checkbox" id="approver">
<div class="col-1 c-avatar mr-3">
<img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">
</div>
<div class="col-8">
<div class="">{{ $user->name }}</div>
<label for="" class="text-secondary">{{ $user->email }}</label>
</div>
</div>
</input>
</li>
</div>
</ol>
#endforeach
Here is the code that shows the selected checkbox content :
<ol id="list" class="list-group" style="display:none">
<div class="card">
<li class="list-group-item">
<div class="row">
<div class="col-1 c-avatar mr-3">
<img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">
</div>
<div class="col-8">
<div class="">{{ $user->name }}</div>
</div>
</li>
</div>
</ol>
and here is the javascript code :
<script>
function checkBox(){
// console.log(e)
var cb = document.getElementById("approver");
var text = document.getElementById("list");
if(cb.checked==true){
text.style.display="block";
} else {
text.style.display="none";
}
}
</script>
any solutions?
You can use the passed reference to the checkbox instead of using getElementById as it gets the first occurrence for an element with the provided id, for more details please check Document.getElementById.
You JS code could be like this:
<script>
function checkBox(cb){
// console.log(e)
var text = document.getElementById("list");
if(cb.checked==true){
text.style.display="block";
} else {
text.style.display="none";
}
}
</script>
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>
I have an ng-repeat inside another one and I am trying to find out the parents index.
Because it is being ordered after the fact, I can't do the typical
ng-repeat="(step_index, step) in flow"
Does anyone know why this would be happening?
<ul>
<li ng-repeat="step in flow | orderBy:'+step_number'">
<div class="step_container">
<div class="step_content">
<div ng-repeat="task in step.tasks">
<div class="task_container">
<div class="task_content">
{{ $parent.$index }} - {{ $index }}
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
You can use ng-init="$parentIndex = $index" on your parent <li>, then call $parentIndex in the child ng-repeat
<ul>
<li ng-repeat="step in flow | orderBy:'+step_number'" ng-init="$parentIndex = $index">
<div class="step_container">
<div class="step_content">
<div ng-repeat="task in step.tasks">
<div class="task_container">
<div class="task_content">
{{ $parentIndex }} - {{ $index }}
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
Here is my HTML code
<div class="col-md-4">
<ul class="list-group text-left">
<a href="#" class="list-group-item" ng-click="showData($index)" ng-repeat="field in Data">
{{ field.name }}</a>
</ul>
</div>
<div class="col-md-8">
<div ng-repeat="field in Data" >
<div class="panel panel-primary" ng-repeat="scenario in field.scenarios track by $index">
<div class="panel-heading ">
{{ scenario.name }}
</div>
<ul class="list-group p-body">
<li class="list-group-item" ng-repeat="values in scenarios.values track by $index">{{ value }}</li>
</ul>
</div>
</div>
I want to show the col-md-8 div data based on index selected from the field.name from col-md-4 list group.
Here is my Sample Data
{
"scenarios": [{
"values": ["value 1",
"value 2",
"value 3"],
"title": "some title"
},
{
"values": ["value 1",
"value 2",
"value 3"],
"title": "some title"
},
{
"values": ["value 1",
"value 2",
"value 3"],
"title": "some title"
}],
"description": "",
"name": "Some name "
}
The name is displayed on the left (in col-md-4)and the corresponding data has to be shown on the right(in col-md-8).
But I can't figure out how to do it. Any help ?
declare a scope varible to store selected index, depend on selected index show other div,
<div class="col-md-4">
<ul class="list-group text-left">
<a href="#" class="list-group-item" ng-click="selectedIndex = $index" ng-repeat="field in Data">
{{ field.name }}</a>
</ul>
</div>
<div class="col-md-8">
<div ng-show="selectedIndex == $index" ng-repeat="field in Data">
<div class="panel panel-primary" ng-repeat="scenario in field.scenarios track by $index">
<div class="panel-heading ">
{{ scenario.name }}
</div>
<ul class="list-group p-body">
<li class="list-group-item" ng-repeat="values in scenarios.values track by $index">{{ value }}</li>
</ul>
</div>
</div>
If you only are going to display one field object, I would just do the following:
<div class="col-md-4">
<ul class="list-group text-left">
<a href="#" class="list-group-item"
ng-click="selectedField = field"
ng-repeat="field in Data">
{{ field.name }}</a>
</ul>
</div>
<div class="col-md-8">
<!-- only if one is selected -->
<div ng-if="selectedField">
<div class="panel panel-primary"
<!-- get data from 'selectedField' -->
ng-repeat="scenario in selectedField.scenarios track by $index">
<!-- other stuff -->
</div>
</div>
</div>