Why can't I use the tag in a quick condition?
The code is as follows:
# (company.Fax! = null? "< i class =" fas fa-fax " > :" + company.Fax: null)
But it doesn't work
You can't use HTML like <i ...> </i> in the render section. It will be escaped and show as <i > on the screen.
The easiest solution is an #if :
#if(company.Fax != null)
{
<i class = "fas fa-fax"> </i>: company.Fax
}
if you do want to use the ?: operator it has to look something like
#((MarkupString) (company.Fax != null? "<i class=\"fas fa-fax\" > </i>:" + company.Fax : null))
Related
I am trying to display an icon in a column instead of its text via CSS. However, I have been unable to find right syntax for this piece of code.
My reactjs code has:
return '<div><span class="fa fa-2x fa-star" style="display : [' + item.Status + ' == approved] ? block: none"></span></div>';
}
That results in below code which doesn't work:
<div>
<span class="fa fa-2x fa-star" style="display : [submitted == approved] ? block: none"></span>
</div>
In the above situation when "submitted" != "approved", it ideally shouldn't show the icon but the star icon show up in each row (whether value matches or not).
In chrome, I've also tried below codes and many similar formats but none of them work:
<span class="fa fa-2x fa-star" style="[rejected == approved] ? display: block : display : none"></span>
<span class="fa fa-2x fa-star" style="display : [rejected == approved] ? block : none"></span>
<span class="fa fa-2x fa-star" style="display : "rejected" == "approved" ? block : none"></span>
My requirement is that icon should be visible only when value LHS and RHS value matches, eg: "approved" = "approved".
The solution that worked for me is:
var cssClass = item.Status = "approved" ? "fa fa-2x fa-star" : "myblankcssclass" ; //add various classes using ternary operator.
return '<div><span class=" '+ cssClass + '" </span></div>';
}
You try this:
displayStyle = submitted == approved ? 'block': 'none';
return (
<div>
<span class="fa fa-2x fa-star" style={{ display: displayStyle }}></span>
</div>
)
Code that worked for me:
var cssClass = item.Status = "approved" ? "fa fa-2x fa-star" : "myblankcssclass" ; //add various classes using ternary operator.
return '<div><span class=" '+ cssClass + '" </span></div>';
}
I'm using an icon, which I display based on a condition using ng-class. I want to add ID's for both the HTML tags.
<i ng-show="ctrl.data.length > 1"
ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen,
'glyphicon glyphicon-chevron-up': ctrl.isOpen}">
</i>
In order to have a dynamic ID value, wrap it in {{}} so that Angular interprets that value.
<i ng-show="ctrl.data.length > 1" id="{{ctrl.isOpen ? 'chevron-up' : 'chevron-down'}}"
ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen,
'glyphicon glyphicon-chevron-up': ctrl.isOpen}">
</i>
I have to show an <a> tag. But depending on whether a value exists or not, I need to set href.
This is what I have:
<a ng-show="source.element!=0" "href="#/resource/{{source.a}}/{{source.b}}/val">
{{source.element}})
</a>
<a ng-show="source.element==0" "href="">{{source.element}}</a>
If source.element is 0 , then nothing should happen on clicking on the value of source.element (href="")
Else, the page must be redirected according to the href.
Is there a better way to do this since this duplicates code?
Thanks..
create a method in scope
$scope.getUrl = function(source){
return source.element==0 ? '#' : '#/resource/'+source.a+'/'+source.b+'/val';
}
then call from view
<a ng-href="{{getUrl(source)}}">
{{source.element}})
</a>
For angular markup it's better to use ngHref .
Becuse if user click on href before angular load it'll go the wrong address.
You can use ng-if
<div ng-if="source.element!=0"><a ng-href="your-url">{{sourceElement}</a></div>
<div ng-if="source.element==0"><a ng-href="">{{sourceElement}}</a></div>
ngif Documentation
Use ng-switch to reduce the number of watches and code duplication:
<span ng-switch="source.element">
<a ng-switch-when="0">
{{source.element}}
</a>
<a ng-switch-default ng-href="#/resource/{{source.a}}/{{source.b}}/val">
{{source.element}}
</a>
</span>
In your controller:
$scope.source.url = $scope.source.element === 0 ? '' : '#/resource/' + $scope.source.a + '/' + $,scope.source.b + '/val';
And in your markup
<a "ng-Href={{source.url}}>{{source.element}}</a>
Create a directive with two attributes like condition and url:
app.directive('anchor', function() {
return {
scope: {
condition: '=expr',
url: '#',
prompt: '#'
},
restrict: 'AE',
replace: 'true',
template: '<div>' +
'<div ng-if="condition">' +
'<a ng-href="{{url}}">{{prompt}}</a>' +
'</div>' +
'<div ng-if="!condition">{{prompt}}</div>' +
'</div>'
};
});
<anchor expr="1 === 1" url="#/test" prompt="test" />
The jsfiddle link.
I'm use Font awesome icons in my vBulletin style and i want to change the (minus) icon to (plus) when click ! Is there a way to do it ?
<a rel="nofollow" style="float:left" href="#" onclick="return
toggle_collapse('forumbit_$forumid')">
<span style="color:#24356C;" >
<i class="fa fa-minus-square-o fa-2x"></i>
</span>
</a>
I think this question(and the answer) can help you do what you want :)
Change an element's class with JavaScript
Assign an id to your icon, e.g.
<i class="fa fa-minus-square-o fa-2x" id="i-1"></i>
The id can be dynamic value like 'i-$forumid' depend on how you generate your html.
In your toggle_collapse('forumbit_$forumid') function,
Add
var e = document.getElementById('i-1');
if (e.classList.contains('fa-plus-square-o')) {
e.classList.toggle('fa-plus-square-o');
} else {
e.classList.add('fa-plus-square-o');
}
or
function toggle_collapse(forumID) {
...
var iconID = 'i-' + formumID.replace('forumbit_','')
var e = document.getElementById(iconID);
if (e.classList.contains('fa-plus-square-o')) {
e.classList.toggle('fa-plus-square-o');
} else {
e.classList.add('fa-plus-square-o');
}
...
}
I have the following code block that nearly works. It completes the outer #foreach cycle and starts each sub #foreach cycle. It puts out the first image in each pair but then outputs
"} if(countItem==1) (" which can be read in the browser.
Any advice would be appreciated
Craig
Code:-
#inherits umbraco.MacroEngines.DynamicNodeContext
#{
int level = 2;
var subjects = #Model.AncestorOrSelf(level).Children.Where("nodeTypeAlias == \"SideGallerySectionHeading\"");
int countItem = 1;
if (subjects != null) {
<div class="highslide-gallery">
#foreach(var subjectName in subjects){
<h3>#subjectName.Name</h3>
foreach(dynamic image in subjectName.Children) {
if(countItem==1){<div class="picrowdiv">}
<div class="picdiv">
<a href="#image.Media("itemLarge","umbracoFile")" class="highslide" onclick="return hs.expand(this)">
<img src="#image.Media("itemThumbnail","umbracoFile")" width="100" height="100" alt="test"></a>
<div class="highslide-caption">
#image.bodyText
</div>
<p>#image.caption</p>
</div>
if(countItem==1){</div>}
countItem++;
if(countItem>2){countItem=1;}
}
}
</div>
}
}
You may try to rewrite the line
if(countItem==1){</div>}
into
#if(countItem==1){
</div>
}
Razor is quite picky about closing your html tags so you may have to refactor to make this work. I like ternary operators for stuff like this
try
#(countItem==1 ? "</div>")
#countItem++;
#(countItem>2 ? countItem=1)
you can also do else with a :
so
#(countItem==1 ? "</div>" : "")