Can I use ng-show and ng-hide to display/hide a html template.
If that template is different html file.
I am trying to split my html file into two parts and show/hide it on a event.
It would be better is you use ng-if instead ng-show as it would save one html template request.
<div ng-if="some_condition">
<div ng-include="'template1_path.htm'"></div>
</div>
<div ng-if="!some_condition">
<div ng-include="'template2_path.html'"></div>
</div>
Yes you can use ngShow/ngHide in conjunction with ngInclude:
<div ng-show="some_condition">
<div ng-include="template1_path">
</div>
</div>
<div ng-show="!some_condition">
<div ng-include="template2_path">
</div>
</div>
Related
I'm trying to integrate this card styling (https://codepen.io/simeydotme/pen/PrQKgo) into my rails app. But it seems quite difficult to do so because my code generates the image URL on the HTML, but this CodePen has its image URLS declared in the CSS inside a variable like --charizardfront:.
My qestion is, how can you modify this CodePen so that it works by taking the URLs from the HTML instead?
The CodePen and my project uses SCSS, so perhaps that give us more options?
This is my _profile-quest_cards.html.erb code for the card/s that I want to style if anyone is interested:
<div class="profile-carousel profile-carousel--quest_cards">
<div id="profile-carousel-quest_cards-actual">
<% current_user.quest_cards.each do |quest_card| %>
<div class="profile-carousel-item profile-carousel-item--quest_cards" data-asset-id="<%= quest_card.id %>">
<div class="profile-carousel-award profile-carousel-award--quest_cards">
<div class="award-image">
<%= image_tag(quest_card.url) %>
</div>
<div class="award-meta">
<span class="name"><%= quest_card.label %></span>
<span class="for"><%= quest_card.description %></span>
</div>
</div>
</div>
<% end %>
</div>
</div>
<div id="profile-carousel-quest_cards-arrow-left" class="profile-carousel-arrow profile-carousel-arrow--left profile-carousel-arrow--quest_cards">
<div class="arrow-wrapper"><div class="arrow"><span class="cs-icon cs-arrow-down"></span></div></div>
</div>
<div id="profile-carousel-quest_cards-arrow-right" class="profile-carousel-arrow profile-carousel-arrow--right profile-carousel-arrow--quest_cards">
<div class="arrow-wrapper"><div class="arrow"><span class="cs-icon cs-arrow-down"></span></div></div>
</div>
</div>
I've tried the method suggested by ChatGTP, but that doesn't work on codepen:
"You can add a data-* attribute to the div element that contains the image, and assign the value of quest_card.url to it. Then in the SCSS code, you can select that div, and use the attr() function to get the value of the data-* attribute, and assign it to the --charizardfront variable.
Here's an example of how you could do this:
HTML:
<div class="card charizard animated" data-charizard-front="https://cdn.midjourney.com/42ada987-b1aa-4797-a4be-b8cc4a6a6b13/grid_0.png"></div>
SCSS:
--charizardfront: url(attr(data-charizard-front));
When I try that on Codepen, the card image doen't show. Hope I can accomplish my task without using javascript, but if that's the best soloution then I'll take it. Thank you!
HTML divs don't use urls as attributes. You're probably looking for
<img>
Try something like
<img src='path'></img>
I'm new to Angular, Bootstrap and front-end programming.
I'd like to create several boxes.
After clicking on the box, detailed view of it should display above all boxes section.
This is what I'm trying to create:
and then after clicking on box number 1:
But now it looks like this:
I'm creating these boxes via Angular *ngFor loop like this:
<div class="container text-center" id="cryptocontainer">
<div class="row" *ngIf="coins">
<div *ngFor="let coin of objectKeys(coins); let i = index" id="currencybox" class="col-md-2" (click)="coinDetails(coin,i)">
<img id="image" [src]="getImage(coin)" class="img-responsive">
<div class="cryptoname">{{ coin }}</div>
<div class="cryptoprice">{{ coins[coin].USD | currency:'USD':true}}</div>
<div class="details" *ngIf="detailToggle[i]" no-lines>
<div class="row">
<div class="col">
<div class="label">CHANGE(30 dni)</div>
<canvas id="canvas{{i}}">{{ chart[i] }}</canvas>
</div>
</div>
<div class="row" id="details">
<div class="col-sm">
<div class="label">MARKET CAP</div>
<div class="answer">{{details.MKTCAP}}</div>
</div>
<div class="col-sm">
<div class="label">CHANGE(24h)</div>
<div class="answer">{{ details.CHANGE24HOUR }} ({{ details.CHANGEPCT24HOUR }}%)</div>
</div>
<div class="col-sm">
<div class="label">MAX (24h)</div>
<div class="answer">{{ details.HIGH24HOUR }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
It's difficult to answer specifically without seeing your component code, but what you are probably missing, conceptually, is an understanding of how to break a UI like this into components and then pass data between those components in the "Angular" way. There are several ways to attack this. Ideally, I think you would move the details div to a separate component that has an input that receives the details, then create a separate component for the clickable divs that have an output that fires a custom event when clicked. These would both be instantiated in the template of a parent component, which would hold the current state of the clicked detail.
So, when you click a clickable component, it passes its details data back up to the parent, where it's set on the details property. Since the input on the display/canvas component is bound to that property, angular change detection will handle updating that component for you.
Here is a stackblitz with a simplified example of the communication pattern I am describing. You could also do something like create a shared service that you inject into both and then update that when a component is clicked.
https://angular-azmcxt.stackblitz.io
Stackblitz Editor Link
<div th:if="${tblUserList != null}">
--content--
</div>
The above thymeleaf code is not working, where tblUserList is a list. So I want to check whether the list is empty instead of checking its null. How to do that?
You can do as follows:
<div th:if="${not #lists.isEmpty(tblUserList)}">
--content--
</div>
With Thymeleaf 3.x.x you can validate list more elegant:
<div th:if="${tblUserList!=null and !tblUserList.empty}"></div>
or
<div th:if="${tblUserList!=null and !tblUserList.isEmpty()}"></div>
Or simply:
<div th:if="${!myList.empty}">
Instead of negating you could use thymeleafs inverted if unless
<div th:unless="${myList.empty}">
I am trying to display the html tags from the data in the view.I have a data level which is $scope.level="<b>i should be bold</b>" and when the data is given in the template as given below should respect the html tag as well
<div ng-controller="MyCtrl" >
{{level}}
</div>
that is it should be bold without using
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<b>{{level}}</b>
</div>
But with what i have tried so far i am not able to achive it.It is also showing the tag in the view.The issue is illustrated in this JSFiddle Here.
Is there anyway to achieve it.or am i totally wrong here?
You can use the ngBindHtml directive which evaluates the expression and inserts the resulting HTML into the element. Don't forget to include the ngSanitize directive.
https://docs.angularjs.org/api/ng/directive/ngBindHtml
Example :
app.js
angular.module('app', ['ngSanitize'])
.controller('Controller', function($scope) {
$scope.data = '<b>my text</b>'
});
index.html
<div ng-controller="Controller">
<p ng-bind-html="data"></p>
</div>
You can use ng-bind-html-unsafe:
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<div ng-bind-html-unsafe="level"></div>
</div>
Unsafe because the DOM should generally not be modified inside a controller.
Why can't you move the <b> tags to the markup and then just interpolate the value of 'level'?
http://jsfiddle.net/u37xtpjd/2/
You can accomplish this using the ng-bind-html directive:
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<span ng-bind-html="level"></span>
</div>
I use an editor to add comment and this content save as html in db. When I want to display it in page all html elements appear in out put. So I want to use this code to solve my problem but not solve it.
Here is my code
Data include {body, name, date} that body save as html
<div ng-repeat="d in Data">
<div class='content'>
<div ng-bind-html-unsafe="d.body">
<p>{{d.body}}</p>
</div>
</div>
</div>
In jsfiddle inside an question is using angular 1.1 in which ng-bind-html-unsafe is working.
But currently angular has deprecated ng-bind-html-unsafe from latest version, instead you need to use ng-bind-html then sanitize that url from the angular filter using $sce service and $sce.trustedAsHtml()
Filter
app.filter("sanitize", ['$sce', function($sce) {
return function(htmlCode){
return $sce.trustAsHtml(htmlCode);
}
}]);
HTML
<div ng-repeat="d in Data">
<div class='content'>
<div ng-bind-html="d.body | sanitize">
<p>{{d.body}}</p>
</div>
</div>
</div>
For more info refer this SO answer