<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}">
Related
I try to replace
<div sec:authorize="hasRole('ADMIN')"></div>
by
<div sec:authorize="hasRole(${T(com.mypackage.Role).ADMIN.getText()})"></div>
but it does not work. Then I tried
<div th:with="role=${T(com.mypackage.Role).ADMIN.getText()}" sec:authorize="hasRole(${role})"></div>
and with preprocessing
<div th:with="role=${T(com.mypackage.Role).ADMIN.getText()}" sec:authorize="hasRole(__${role}__)"></div>
but is still not working.
Something like this should work:
<div th:if="${#authorization.expression('hasRole(''' + T(com.mypackage.Role).ADMIN.getText() + ''')')}">
</div>
(I don't think the sec: attributess interpret Thymeleaf expressions same as other tags... at least I couldn't find any examples of it.)
<div sec:authorize="hasRole(T(com.mypackage.Role).ADMIN)"></div>
Thanks #ChetanAhirrao
index.ts
bubbles: any [][] = [['80%','Meeting'],['20%','Meeting']]
index.html
<div *ngFor="let bubble of bubbles">
<div class="bubble" style="margin-left:{{bubble[0]}};">
</div>
</div>
I am trying to have the margin-left style use the data from the array bubbles[0].
The for loop gives ['80%','Meeting'] in that layout so I have tried to set the 0 element of that array to the margin-left style but this isn't working. Is there another way to do this process?
use [ngStyle] instead of style. documentation here.
<div class="bubble" [ngStyle]="{'margin-left': bubble[0]}">
In addition to #Pengyy's answser, you can also use
<div class="bubble" [style.margin-left]="bubble[0]">
I tried to do it like this:
<div class="<!-- ###AUTHOR### --><!-- ###AUTHOR### -->">
And this:
<div class="###AUTHOR###">
but it does not work
woops, second variant works, but I write this wrong
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>
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>