I am trying to sort my data in angularjs using ng repeat in a way where all data start filling the first column and if there are more it goes to the second.(Like form A)
Like this:
form A form B
0 3 and not like this 0 1
1 4 2 3
2 5 4 5
in this order.
help???
this is the code that i tried: note that this displays the products giving them col-xs-6 (like form B)which is not what i want(form A)
<div class="container">
<div class="row">
<div ng-repeat="product in products">
<div>
<div >
<div class="col-xs-6">
{{product}}
</div>
</div>
</div>
</div>
</div>
</div>
Related
**#foreach($posts as $post)**
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">**{{$post->title}}**</h5>
<p class="card-text">**{{$post->description}}**</p>
<p class="card-text">**{{$post->price}}**</p>
</div>
</div>
**#endforeach**
I want to create 4 inline cards to display all post (4 cards on each line).
I tried to put the past code in
<div class="card-group">
**here**
</div>
but the result is many cards on the same line.
What's the best way to create a known number of cards (4) on each line using bootstrap and laravel #foreach?
Use the chunk() method and a nested loop:
#foreach($posts->chunk(4) as $chunk)
<div class="card-group">
#foreach($chunk as $post)
<div class="card">...</div>
#endforeach
</div>
#endforeach
For reference: https://laravel.com/docs/8.x/collections#method-chunk.
This will split your $posts Collection into groups of 4 (or less), which you can then iterate, create a card-group for each chunk, and a card for each post within the chunk.
I am trying to scrape multiple elements with the same class names but each has a different number of children. I am looking for a way to select specific elements using the xpath(this would make it easiest for my loop).
const gameTimeElement = await page.$$('//*[#id="section-content"]/div[2]/div[1]/div/div['+ i + ']');
const gameTimeString = await gameTimeElement[j].$eval('h3', (h3) => h3.innerHTML);
This currently does not work.
After I select the element, I grab the h3 tag inside and evaluate it to get the innerHTML.
Is there a way to do this utilizing xpath?
<div id="section-content" style="display: block;">
</div>
<div class="matches">
<div class="day day-28-1" data-week="1" style="display: block;">
<h4>Sat, March 28, 2020</h4>
<div class="day-wrap">
<div class="match region-7-57d5ab4-9qs98v" data-week="1">
<h3 class="time">2:00PM
<span>(Central Daylight Time)</span>
<span class="fr">Best of 7</span>
</h3>
<div class="row ac ">
<div class="col-xs-3 ar">
<img class="team-logo" src="url"></div>
<div class="col-xs-2 al">
<h4 class="loss">(NA)<br>
<span class="team-name">Team1</span>
<br>
<span class="win spoiler-wrap">0</span>
</h4>
</div>
<div class="col-xs-2">
<img class="league-logo" src="url">
<h4> V.S.</h4>
</div>
<div class="col-xs-2 ar">
<h4 class="">(NA)<br>
<span class="team-name">Team2</span>
<br>
<span class="win spoiler-wrap">4</span>
</h4>
</div>
This is a sample of what I am working with for HTML on the website.
Yes, div class="day-wrap" could have a different number of childs. But I don't think that's a problem.
You want to get game times of all Rocket League matches. As you've noticed, games times are located within h3 elements. You can access it directly with one of the following XPaths :
//div[#id="section-content"]//h3
//div[#class="day-wrap"]//h3
//div[contains(#class,"match region")]//h3
If you want something for a loop then you can try :
(//div[#class="day-wrap"]//h3)[i]
where i is the number to increment (from 1 to x).
Side notes : your sample data looks incorrect (according to your XPath). You have a closing div line 2 and it seems you omit div class="row middle-xs center-xs weeks" before div class="matches".
Im having trouble displaying data in a two column div in laravel using bootstrap. The content of the other div is going below the other for some reason. Heres the code.
#extends('layouts.app')
#section('content')
<!--twitch client id!-- vzq62rzb1bbh0d1ebtp5pcx70ysvva!-->
<h1>Hello {{user->user_name}}</h1>
<body background = "img/cool_background.png">
<div class = "container">
<div class = "col-md-3">
<div id = "firstNewsCard" class = "row wow fadeInLeft">
</div>
<div class = "c0l-md-9">
<!--the other column div!-->
</div>
</div>
</body>
#endsection
you made a little mistake, '0' instead of 'o'
<div class = "c0l-md-9"> --> ` <div class = "col-md-9">`
good luck
As bootstrap doc suggests, you should use an element with class="row" to wrap all inner col-x-y classed elements (with "x" being xs, sm, md or lg and "y" usually summing 12, could be less but not more), like:
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9">
</div>
</div>
</div>
I have an arraylist from which I need to get values where isActive = true, and to display the data in a <div> tag with the use of ng-repeat.
My problem is that I don't want to keep using ng-repeat every time, while fetching values in each <div> tag.
Is there any generic solution which will iterate only once, and I can see the value in <div>, side by side. Please see this attempt:
enter link description here
I want to see a result like this:
You can write your ng-repeat like below.
Whenever it get isActive true, it will create the div section for this.
<body ng-controller="MainCtrl">
<div ng-repeat="tempData in data">
<div ng-if="tempData.isActive == true" >
<div class="col-xs-12" >
<div class="col-xs-4">Plan Type:</div>
<div class="col-xs-8">{{tempData.plantype}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Term:</div>
<div class="col-xs-8">{{tempData.term}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Rate:</div>
<div class="col-xs-8">{{tempData.rate}}</div>
</div>
</div>
</div>
</body>
How do I properly align my <div class="small-6 columns"> (callout) to the right (on large screen) inside the <div class="row"> in Foundation 6? I am using Sass.
<div class="row">
<div class="small-6 columns">
<div class="callout large">
<p>This is my callout</p>
</div>
</div>
</div>
Just a class large-offset-6 to small-6 columns, it will move six columns to right.
For more information see http://foundation.zurb.com/sites/docs/grid.html