Convert underscores to hyphens in angular variable - css

I have data icons whose classes are formatted by vehicle type and then sub-type, like so:
.di-icon-type-car-full-size-car
.di-icon-type-car-mid-size-car
.di-icon-type-van-large-van
.di-icon-type-van-minivan
In my view I am trying to dynamically set the class based on the current vehicle's information:
span(ng-class="'di-icon-type-' + vehicle.type + '-' + vehicle.sub_type")
The problem is, my vehicle.sub_type variable is formatted with underscores, not dashes. So the class appears as di-icon-type-car-full_size_car instead of di-icon-type-car-full-size-car, for example. Is there a way I can convert all underscores in my vehicle.sub_type variable to hyphens before using it?

I would suggest to move a string concatenation and dash normalization into a function in a controller like this:
$scope.getIconClass = function(vehicle) {
var className = 'di-icon-type-' + vehicle.type + '-' + vehicle.sub_type;
return className.replace(/_/g, '-');
};
Then use it like this in the template:
<span ng-class="getIconClass(vehicle)"></span>
Alternatively, you could write a custom filter to do the job:
.filter('kebabcase', function() {
return function (value) {
return value && value.replace(/_/g, '-');
};
});
Then use it like this:
<span ng-class="'di-icon-type-' + vehicle.type + '-' + vehicle.sub_type | kebabcase"></span>
Example Plunker: http://plnkr.co/edit/dRj6Sf3NeUq8IxnBshyE?p=preview

span(ng-class="'di-icon-type-' + vehicle.type.replace(/_/g, "-") + '-' + vehicle.sub_type")
should work for you

Related

How can i parse document.write/response.write to use single quotes instead of double quotes for AngleSharp?

I'm working with old html(ASP) files and i need to convert/parse them to work with new browsers.
I'm using AngleSharp, my problem is when it tries to parse response and document.write that uses single quotes for it's values and AngleSharp parse it to double quotes.
Input
Response.Write ("<input type=text name=attrname value='" + sVar + "'>");
Output (AngleSharp)
Response.Write ("<input type="text" name="attrname" value="" + sVar + "">");
Output expected
Response.Write ("<input type='text' name='attrname' value='" + sVar + "'>");
Is there a way to skip parsing or set a different formating for both? Thank you in advance!
The serialization is done by an IMarkupFormatter. By default, this formatter uses double quotes for the attributes (as the formatter does not know that you are inside some ASP code where you use double quotes on the outside).
Easiest way would be to roll your own formatter (example):
class MyMarkupFormatter : HtmlMarkupFormatter
{
protected override string Attribute(IAttr attr)
{
return $"{attr.Name}='{attr.Value}'";
}
}
You could use it like this:
var config = Configuration.Default;
var context = BrowsingContext.New(config);
var input = "<input type=text name=attrname value='\" + sVar + \"'>";
var document = await context.OpenNewAsync();
var formatter = new MyMarkupFormatter();
document.Body.InnerHtml = input;
document.Body.FirstChild.ToHtml(formatter).Dump(); // <input type='text' name='attrname' value='" + sVar + "'>
Note that the implementation of Attribute is only so simple for illustration purposes. You should handle more cases (and potentially take care of transforming contained single quotes etc.).

add timestamp to click event in google tag manager

Currently, in the User Report view of Google Analytics, I get timestamps on each event, but it is only down to the minute, not the second. I can't find a setting in GA that changes that column.
My goal is to pass this timestamp through GTM, perhaps as "tag label", so that I can see it in GA.
How do I create a timestamp variable in GTM?
Create a custom javascript variable (i.e. a variable that contains a function, not a "javascript" variable that just reads a global variable), and give it a name, e.g. "timestamp".
Custom javascript variables are anonymous functions with a return value.
The current way to get a timestamp is Date.now(). This might not be supported by older browser (especially IE 8 and lower), so you might use new Date().getTime(); as an alternative.
The variable body would be as simple as:
function() {
return Date.now();
}
and you would use that in a tag by surrounding the variable name with double curly parenthesis, e.g. {{timestamp}}. Date.now() returns milliseconds ( elapsed since 1 January 1970 00:00:00 UTC), so you might want to divide by thousand.
Alternatively you could create a datetime variable that includes seconds and even milliseconds. I think this was originally by Simo Ahava:
function() {
// Get local time as ISO string with offset at the end
var now = new Date();
var tzo = -now.getTimezoneOffset();
var dif = tzo >= 0 ? '+' : '-';
var pad = function(num) {
var norm = Math.abs(Math.floor(num));
return (norm < 10 ? '0' : '') + norm;
};
return now.getFullYear()
+ '-' + pad(now.getMonth()+1)
+ '-' + pad(now.getDate())
+ 'T' + pad(now.getHours())
+ ':' + pad(now.getMinutes())
+ ':' + pad(now.getSeconds())
+ '.' + pad(now.getMilliseconds())
+ dif + pad(tzo / 60)
+ ':' + pad(tzo % 60);
}
which returns a formatted string like 2016-08-02T09:22:44.496+02:00.
The second it's not accesible via Google Analytics. The closest way to do this is via Google Big Query,but this last is only available for premium members.
Maybe you can add the timeStamp as CustomDimentions
function getdateGA(){
return Date();
}
ga('send', 'event', 'category', 'action', {
'dimention1': getdateGA()
});
The date format is not the best one, try to find the best for you modifing the getdateGA function
More resources about the date in
How to format a JavaScript date

Slickgrid Grouping Row CSS

In this example:
http://mleibman.github.io/SlickGrid/examples/example-grouping
You can group the rows by certain columns, but I would like the rows inside the groups to be indented. Is there a way I can add a class to the grouped rows or something? I can't seem to find a good way to do this.
I'm creating the grouping by doing:
function groupByDuration() {
dataView.setGrouping({
getter: "duration",
formatter: function (g) {
return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
}
});
}
I tried this Slickgrid grouping rows style
var myFormatter = function(row, cell, value, columnDef, dataContext) {
var groupings = this.getGrouping().length;
var indentation = groupings * 15 + 'px';
var spacer = '<span style="margin-left:' + indentation + '"></span>';
return spacer + value;
};
But my question is How do I bind this function with slickgrid's dataView so I can access the groupings as currently I am getting the error "Object doesn't support property or method 'getGrouping'"
Thanks
Thanks!
I'm pretty sure you are trying to shift left some of the column values or the header of the group based on the number of the grouped up rows.
I've modified the grouping-example groupByDuration formatter to try and show this off. Here is the link to the jsFiddle.
If I haven't gotten to the root of what you are trying to accomplish, please try and update the jsFiddle further to illustrate what exactly you are trying to do.

Formatting Date and Time in Jquery Template

Can you please tell me how to format date with time in jquery template like this:
11/9/2011 12:00:00 AM
I am using this function which only formats the date part and hide the time portion of it:
function (jsonDate) {
var value = new Date(parseInt(jsonDate.substr(6)));
return value.getMonth() + 1 + "/" + value.getDate() + "/" + value.getFullYear();
}
How about:
function (jsonDate) {
var value = new Date(parseInt(jsonDate.substr(6)));
return value.toUTCString();
}
You can see more options here

How correctly assign value to field

I am trying to assign value for one edit field(not asp.net control) in asp.net application using JavaScript code. It seems that < character in value string gives problems for ASP.NET. If I remove < and > characters from value everything works fine.
Where is the problem? How to pass <> characters to the field? I don't want to use ServerSide code I want to do it on ClientSide using JS and HTML Edit box.
function loadShareBox(pageTitle) {
document.getElementById("shareHTML").value = '<a href="' + document.location.href + '" target=_blank>' + pageTitle + '</a>';
}
regards,
Tomas
try using these
< corresponds <
> corresponds >
the code would look like this
function loadShareBox(pageTitle) {
document.getElementById("shareHTML").value = '<a href="' + document.location.href + '" target=_blank>' + pageTitle + '</a>';
}
edit: ah, I think there is another problem. You are trying to insert a new element within another element. So you should create a new element and append in shareHTML.
var myLink = document.createElement("a");
myLink.setAttribute("href", "mylink");
var text = document.createTextNode("Link name");
myLink.appendChild(text);
var myElement = document.getElementById("shareHTML")
myElement.appendChild(myLink);
this should do the work

Resources