I have my base url say: http://www.example.com and file name is coming from api which is in dataSource like this:
[
{
"bid": "2",
"bnam": "ChickenChilli",
"adds": "nsnnsnw, nnsnsnsn",
"pdap": "5",
"pdp": "50",
"rat": null,
"covr": "screenshot_20200403-225802_1_20200404154756935600.png"
},
{
"bid": "3",
"bnam": "Fudding",
"adds": "hhhnj, hhjj",
"pdap": "2",
"pdp": "60",
"rat": "4.7",
"covr": "screenshot_20200403-225438_20200405102523050200.png"
}
]
I am not able to set background image using ngfor
<div class="product-single-content" *ngFor="let d of dataSource" (click)="listItemClick(d.name)">
<a>
<div class="product-top" style="background-image:url('http://example.com/{{d.covr}}');">
<span><i class="fa fa-heart" aria-hidden="true"></i></span>
</div>
<div class="product-bottom">
<div class="content-left">
<h3>{{d.bnam}}</h3>
<span>{{d.adds}}</span>
<strong>₹{{d.pdap}} onwards</strong>
</div>
<div class="content-right" style="background:#00bcd4">
<p><span>{{d.rat}}</span><b>{{d.pdp}}%</b></p>
</div>
</div>
</a>
</div>
Try using setting style dynamically as :
<div class="product-top" [style.background]="'url(http://example.com/' + d.covr + ')'">
<span><i class="fa fa-heart" aria-hidden="true"></i></span>
</div>
Related
i have a JSON object
{
"products": [
{
"devices": [
{
"label": "P1D1"
},
{
"label": "P1D2"
}
]
},
{
"devices": [
{
"label": "P2D1"
},
{
"label": "P2D2"
}
]
}
]
}
and i want to have in HTML something like this
<div class="row">
<div class="col-3">
P1D1
</div>
<div class="col-3">
P1D2
</div>
<div class="col-3">
P2D1
</div>
<div class="col-3">
P2D2
</div>
</div>
AngularJS is the language i am using, but i don't seem the find the right syntax
<div class="row">
<div ng-repeat="product in obj.products">
<div class="col-3" ng-repeat="device in product.devices">
{{device.label}}
</div>
</div>
</div>
How can i achieve all the subitems to be displayed in a bootstrap column next to eachother?
I think you can't do it directly using only HTML. Alternatively you can use some manipulation in Javascript to flatten your data.
JAVASCRIPT
$scope.getItems = function(){
return $scope.obj.products.flatMap(function(element){
return element.devices;
})
}
HTML
<div class="col-3" ng-repeat="device in getItems()">
{{device.label}}
</div>
Check my example:
https://codepen.io/avgustint/pen/XWYyoyd?editors=1111
I have an application that list's some content on page dynamically. So we choose some achievement, and create a section that have from 1 to X achievements and on this page, they're listed using col-md-x.
I want to use the col-md-6 size, because I have some elements that's dynamic and I need some space to show it.
But my problem here is, I want to make the columns to use the empty space, for example this image:
The red area, below section 'informe um nome2' isn't occupied, but I want to show the third, 'informe um nome3' below this section and use the free space.
Here's my current code:
<div class="row col-md-12">
#foreach (var item in Model)
{
<div class="col-md-6" style="margin-bottom:20px">
<div class="card">
#if (item.SectionHeader != null)
{
<div class="card-header text-center" style="height: 120px; background-image: url('#item.SectionHeader.ImageURL'); background-size:cover; color:black">
#item.SectionName <a title="Renomear" ng-click="Rename(#item.SectionID)"><i class="fa fa-xs fa-clipboard" style="cursor:pointer"></i></a> <a title="Baixar arquivo da seção" ng-click="DownloadFiles(#item.SectionID, false)"><i class="fa fa-xs fa-download" style="cursor:pointer; color:green"></i></a> <a title="Apagar seção" ng-click="Delete(#item.SectionID)"><i class="fa fa-xs fa-trash" style="cursor:pointer; color:red"></i></a>
</div>
}
else
{
<div class="card-header text-center">
#item.SectionName <a title="Editar" href="#Url.Action("EditSection", "Guides", new { sectionID = item.SectionID })"><i class="fa fa-xs fa-edit" style="cursor:pointer; color:orange"></i></a> <a title="Renomear" ng-click="Rename(#item.SectionID)"><i class="fa fa-xs fa-clipboard" style="cursor:pointer"></i></a> <a title="Baixar arquivo da seção" ng-click="DownloadFiles(#item.SectionID, false)"><i class="fa fa-xs fa-download" style="cursor:pointer; color:green"></i></a> <a title="Apagar seção" ng-click="Delete(#item.SectionID)"><i class="fa fa-xs fa-trash" style="cursor:pointer; color:red"></i></a>
</div>
}
<div class="card-body">
#foreach (var chievo in item.GameAchievements.OrderBy(f => f.SectionOrder.HasValue ? f.SectionOrder : f.AchievementID))
{
<div class="achievement" id="#chievo.AchievementID" style="margin-top:10px; margin-bottom:10px; z-index:1; height:60px">
<ul style="list-style:none; margin-top:20px; padding-left:0px" id="#chievo.AchievementID">
<img src="#chievo.Icon" style="float:left" />
<b> #chievo.DisplayName</b>
<br />
#if (string.IsNullOrEmpty(chievo.Description))
{
<i class="fa fa-edit" style="cursor:pointer" ng-click="OpenModal(#chievo.AchievementID)"></i>
}
else
{
<i>#chievo.Description</i>
}
<div style="float:right" class="text-center">
<a title="Alterar Dificuldade" ng-click="ChangeDifficulty(#chievo.AchievementID)"><i class="fa fa-xs fa-star" style="cursor:pointer; margin-left:10px; color:orange"></i></a>
<a title="Remover da Seção" ng-click="RemoveFromSection(#chievo.AchievementID)"><i class="fa fa-xs fa-trash-alt" style="cursor:pointer; margin-left:10px; color:red"></i></a>
</div>
#if (chievo.Difficulty != null)
{
<img src="#chievo.Difficulty.DifficultyImage" style="float:right; width:32px" />
}
</ul>
</div>
if (item.SectionDivisor != null && (item.IndividualDivisor.HasValue && item.IndividualDivisor.Value == true))
{
<div class="text-center">
<img src="#item.SectionDivisor.DivisorImageURL" />
</div>
}
}
#if (item.SectionDivisor != null && (item.IndividualDivisor.HasValue && item.IndividualDivisor.Value == false))
{
<div class="text-center" style="margin-top:20px">
<img src="#item.SectionDivisor.DivisorImageURL" />
</div>
}
</div>
</div>
</div>
}
</div>
So, basically, I want help making the columns auto-align and auto-fill.
I'm using sb admin 2 free template version.
In this case that won't work as desired, because the elements follow a row column distribution and when two elements fill a row, the next element goes all the way down to the space the longest element of the first two occupies and starts there.
What you could use in this case is something like Isotope using the horizontal masonry layout. You can check more on this on Isotope's docs.
If you still prefer to use the bootstrap option I would recommend you define a height for each column and make it scrollable. That would be the easiest way to order them visually.
Hey Guys I have the following code which loops the <section> everytime I use it within the JSON. This works fine.
However, I am having problems with the nested loop {% for list in lists %} which handles the li elements. It comes out blank and seems to only loop twice when I inspect the element?
{# Question 1 #}
{% for question in questions %}
<section>
<div class="container question" id="question-one">
<div class="row row-eq-height">
<div class="gradient"></div>
<div class="col-md-1 green-box">
<div class="number"><span>1</span></div>
</div>
<div class="col-md-10 dark-grey-box text-center">
<div class="content-wrapper">
{{ question.text|markdown }}
{# SLIDER #}
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="slider-container">
<ul class="list-inline justify-content-center range-labels">
{% for list in lists %}
<li class="list-inline-item"><img src="{{ list.img }}"><span>{{ list.label }}</span></li>
{% endfor %}
</ul>
<div class="range-wrapper">
<img src="../resources/images-assets/images/place-holder-slider.png">
</div>
</div>
</div>
</div>
<div class="cta-wrapper">
<button id="question-one-submit" onclick="buttonClick()">DONATE £1</button>
</div>
</div>
</div>
<div class="col-sm-1 dark-grey-box"></div>
</div>
</div>
</section>
{% endfor %}
In my JSON file I have laid everything out as follows:
"questions": [
{
"text": "##How confident are you in achieving your marketing goals this year?",
"lists": [
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" }
]
}
],
I want the li to appear 5 times with the relevant image and label as I have added in the JSON file.
Can anyone point me in the right direction?
I managed to get this working correctly. Here is the markup:
{% for question in questions %}
<section>
<div class="container question" id="question-{{ loop.index }}">
<div class="row row-eq-height">
<div class="gradient"></div>
<div class="col-md-1 green-box">
<div class="number"><span>
{{ loop.index }}
</span></div>
</div>
<div class="col-md-10 dark-grey-box text-center">
<div class="content-wrapper">
{{ question.text|markdown }}
{# SLIDER #}
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="slider-container">
<ul class="list-inline justify-content-center range-labels">
{% for option in question.options %}
<li class="list-inline-item"><img src="{{ option.img }}"><span>{{ option.label }}</span></li>
{% endfor %}
</ul>
<div class="range-wrapper">
<img src="images/place-holder-slider.png">
</div>
</div>
</div>
</div>
<div class="cta-wrapper">
<button id="button-{{ loop.index }}" onclick="buttonClick()">{{ question.button }}</button>
</div>
</div>
</div>
<div class="col-sm-1 dark-grey-box"></div>
</div>
</div>
</section>
{% endfor %}
The JSON file I am using to accompany this is as follows:
"questions": [
{
"text": "##How confident are you in achieving your marketing goals this year?",
"options": [
{ "img": "images/sad.svg", "label": "Dejected" },
{ "img": "images/thinking-2.svg", "label": "Doubtful" },
{ "img": "images/like.svg", "label": "Hopeful" },
{ "img": "images/check.svg", "label": "Upbeat" },
{ "img": "images/goal.svg", "label": "Surefire" }
],
"button": "DONATE £1"
},
{
"text": "##What are the greatest challenges you face?",
"options": [
{ "img": "images/money-bag.svg", "label": "Budget" },
{ "img": "images/team.svg", "label": "Resources" },
{ "img": "images/bar-chart.svg", "label": "ROI" },
{ "img": "images/timer.svg", "label": "Short-termis" },
{ "img": "images/martech.svg", "label": "Martech" }
],
"button": "DONATE £1"
},
{
"text": "##Where could external agencies add the most value?",
"options": [
{ "img": "images/networking.svg", "label": "ABM" },
{ "img": "images/increasing-stocks-graphic-of-bars.svg", "label": "Demand" },
{ "img": "images/options.svg", "label": "Strategy" },
{ "img": "images/full-items-inside-a-shopping-bag.svg", "label": "Sales Enablement" },
{ "img": "images/content.svg", "label": "Content" }
],
"button": "DONATE £1"
},
{
"text": "##Would you be interested in a further conversation?",
"options": [
{ "img": "images/thumb-down.svg", "label": "Don't contact me again" },
{ "img": "images/maybe.svg", "label": "Unlikely this year" },
{ "img": "images/info.svg", "label": "Need to know more" },
{ "img": "images/calendar.svg", "label": "Get a date in the diary" },
{ "img": "images/boy-broad-smile.svg", "label": "Call me now" }
],
"button": "DONATE £1"
}
],
I am trying to display a table of results from a mongodb but im just trying to gather some structure and learn at the same time so ive just got some dummy data at the moment within a controller
app.controller('modal-controller', function($scope) {
$scope.fakeResults = [
{
"id": "1",
"location": "3",
"value": "27.5"
}, {
"id": "2",
"location": "3",
"value": "27.0"
}, {
"id": "3",
"location": "3",
"value": "27.2"
}, {
"id": "4",
"location": "3",
"value": "27.9"
}, {
"id": "5",
"location": "3",
"value": "28.5"
}
];
});
The html for the modal section im trying to view the results is below
<div ng-controller="modal-controller" class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Temperature Table</h2>
<hr class="star-primary">
<p>TEST TEXT {{ fakeResults }}</p>
<tbody>
<tr ng-repeat="result in fakeResults">
<td>{{$index + 1}}</td>
<td>{{result.id}}</td>
<td>{{result.location}}</td>
<td>{{result.value}}</td>
</tr>
</tbody>
<img src="img/portfolio/cabin.png" class="img-responsive img-centered" alt="">
<p>This page will be used to display simple table of temperature results</p>
<ul class="list-inline item-details">
<li>Hardware:
<strong>Tinkerforge equipment linked</strong>
</li>
<li>Software:
<strong>Github Link</strong>
</li>
<li>Difficulty:
<strong>1</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
The results are visible after viewing the whole sample of data but not with ng-repeat. Not overly sure why this is but ive hopefully narrowed it down to something around the ng-repeat.
Thank You
You forgot table tag around your tbody
<table>
<tbody>
<tr ng-repeat="result in fakeResults">
<td>{{$index + 1}}</td>
<td>{{result.id}}</td>
<td>{{result.location}}</td>
<td>{{result.value}}</td>
</tr>
</tbody>
</table>
I have the following javascript object
var arr = [
[
{ "id": 1, "name": "one" },
{ "id": 2, "name": "two" },
{ "id": 3, "name": "three" }
],
[
{ "id": 4, "name": "four" },
{ "id": 5, "name": "five" },
{ "id": 6, "name": "six" }
],
]
I'm trying to use jquery templates to create the following HTML
<div class="row">
<div class="cell">
<span>1</span> : <span>one</span>
</div>
<div class="cell">
<span>2</span> : <span>two</span>
</div>
<div class="cell">
<span>3</span> : <span>three</span>
</div>
</div>
<div class="row">
<div class="cell">
<span>4</span> : <span>four</span>
</div>
<div class="cell">
<span>5</span> : <span>five</span>
</div>
<div class="cell">
<span>6</span> : <span>six</span>
</div>
</div>
I am using the following templates with no luck :(
<script id="rowTemplate" type="text/x-jQuery-tmpl">
<div class="row">
{{tmpl "#cellTemplate"}}
</div>
</script>
<script id="cellTemplate" type="text/x-jQuery-tmpl">
<div class="cell">
<span>${id}</span> : <span>${name}</span>
</div>
</script>
The line that calls the template is the following:
$("#rowTemplate").tmpl(arr).replaceAll("#somediv");
I am getting only one row with one cell with no data...
<div class="row">
<div class="cell">
<span></span> : <span></span>
</div>
</div>
What am I doing wrong?
I think the problem is with usage of replaceAll and the missing parameter to tmpl in the template.
Try this(used replaceWith for #someDiv and passed $data as tmpl parameter for child template):
<script type="text/javascript">
var arr =
[
[
{
"id": 1,
"name": "one"
},
{
"id": 2,
"name": "two"
},
{
"id": 3,
"name": "three"
}
],
[
{
"id": 4,
"name": "four"
},
{
"id": 5,
"name": "five"
},
{
"id": 6,
"name": "six"
}
]
];
$(function(){
$("#somediv").replaceWith($("#rowTemplate").tmpl(arr));
});
</script>
<script id="rowTemplate" type="text/x-jQuery-tmpl">
<div class="row">
{{tmpl($data) "#cellTemplate"}}
</div>
</script>
<script id="cellTemplate" type="text/x-jQuery-tmpl">
<div class = "cell"><span>${id}</span>:<span>${name}</span></div>
</script>
<div id="somediv"></div>