I have a string that I want to display in the HTML.
But if the first character is a special character the HTML displays it in the wrong order.
for example if the string is :
#test : Twitter
I see it in the browser as:
I tried to change the direction using SCSS and adding space but still looks the same.
how do I display it correctly?
Thanks for any help :)
edit:
I'm working with Angular 8 and redux.
I'm creating the string in this selector:
const getMediaOutlet = createSelector<InquiryDetailsPartialState, InquiryDetailsState, BasicInfoDictionaryModel>(
getInquiryDetailsState, (state: InquiryDetailsState) => {
const mediaOutlets: MediaOutletsModel[] = JSON.parse(state.data.mediaOutlets);
return mediaOutlets && mediaOutlets.length ? {
titleTranslation: 'INQUIRIES.DETAILS.BASIC_INFO.MEDIA_OUTLETS',
value: mediaOutlets.map<DictionaryValueModel>(item => {
return { data:" "+item.text +" : "+ item.typeName } //<- here i build the string ;
}).filter(source => {
return source.data && source.data.length;
})
} : { value: [], titleTranslation: '' };
});
i used :
<bdi> </bdi>
and it maked at the right order.
you can do it this way using simple HTML. You don't have to mess up with any CSS as you can do with the only HTML
Example:-
<p>Start "@" End.</p>
Related
I want to get selected radio button value then create an object to send to database, I have working example here https://stackblitz.com/edit/angular-1frcbc .I got what i expected object like this
{
lessonCode: 'test',
answers: [
{
questionCode : 'question-1',
optionCode : 'option-2'
},
{
questionCode : 'question-2',
optionCode : 'option-3'
},
]
}
but there is an error ERROR like
Error: Error trying to diff 'Option 2'. Only arrays and iterables are allowed
I believe there is something wrong in here
<input type="radio" id="{{option.order}}" [(ngModel)]="question.options" value="{{option.code}}" name="{{question.order}}">
can someone help me? any thoughts would be helpful
EDIT
i know that question.options can't assign to ngModel if i change it to something like option.order .I'm not getting object like what i expected above, if i change to something like that.
I'm pretty sure i need to change this code
getJsonResult() {
let answer: any;
let data = {
lessonCode: "test",
answers: this.data.questions.map(x => {
return {
questionCode: x.code,
optionCode: x.options
};
})
};
this.submitData = data;
console.log(JSON.stringify(this.submitData))
}
i accidentally change my code to something like this
return {
questionCode: x.code,
status: x.options.code
};
and in the html like this
<input type="radio" id="{{option.order}}" [(ngModel)]="question.options.code" value="{{option.code}}" name="{{question.order}}">
and it works and give me the same result, hope this will help someone
I am trying to add a new key-value pair to the already loaded JSON Array. I am adding the new key-value pair to customize the header column cells in react bootstrap table but getting the below errors. Can any one please help?
'Columns' in the below state is where I wanted to add new key-value pair
state = {
data: MYResult.Products || [],
actualData: MYResult.Products || [],
columns: MYResult.ParametricList_Attributes || [],
isCompareClicked: false,
isDisabled: true,
selected: []
};
This is how I am adding the key-value pair -
componentDidMount(){
checkbox = (column, colIndex) => {
return (
<h5>{ column.text }<checkbox/></h5>
);
}
console.log(this.state.columns) ;
newColumn = this.state.columns.map((column) => {
return {...column, headerFormatter: checkbox};
});
this.setState({columns: newColumn });
}
Full code here - https://codesandbox.io/s/o1r988qkz Please uncomment the componentDidMount() to see the issue
Firstly, there's a typo in dcolumn and column.
And regarding the not defined error, you need to define it using const. Use like:
const checkbox = (column, colIndex) => {
return (
<h5>{column.text}<checkbox /></h5>
);
}
JavaScript variables need to be declared when they are used. Public class syntax can not be used everywhere. The error you're getting is self-evident - 'checkbox is not defined'.
Refer this on how to use it: https://tylermcginnis.com/javascript-private-and-public-class-fields/
I simply declared the undeclared variables in your example and the code worked.
I would like to generate the following HTML with Mithril's m:
<p>I am a <code>person</code></p>.
I'm currently using m.trust for this:
m.trust("<p>I am a <code>person</code></p>").
But I don't like the HTML string. Is there a better way to do this?
Yes, use m function to do this:
m('p', [
'I am a ',
m('code', 'person')
])
See a whole component here: https://jsfiddle.net/rtkhanas/02adbhkt/
Where the html string come from?
If you are writing your view, then use m('p', ...) instead of m.trust
For example, if only the "person" value is dynamic, you should have something like:
window.WhoAmI = {}
WhoAmI.controller = function(attr) {
var ctrl = this
ctrl.gender = m.prop(attr.gender)
}
WhoAmI.view = function(ctrl) {
return m('p', [
'I am a ',
m('code',
ctrl.gender()
)
])
}
If you get the whole html string from a request, then it's probably a bad thing, and you should try to rewrite your API (if possible) to send only the dynamic value to the client.
You should have something like this:
m.module(document.body, {
view: function() {
return m('p', [
'I am a ',
m('code', 'person')
]);
}
})
I am using CoffeeScript and HAML. I have objects list:
{
title: "Title"
url: "http://example.com"
image_url: "img.png"
attributes: {
target: '_blank'
}
}
{
// ...
}
And I have a template:
- for item in #model.data
%a.menu-item{"href": item.url}
Can I somehow parse "attributes" if it is exists and add to %a.menu-item element to get <a href="[item.ur]" target="_blank">
If you want to merge all attributes from your hash, this should work:
%a.menu-item{item['attributes'], "href" => item['url']}
To conditionally include a tag element, use defined? The trick is in the ternery - setting the attribute value to nil will remove it. (https://gist.github.com/orioltf/3145400)
As an example (trying to mock up your situation with some quick ruby code)
- _h1 = {'title' => 'Title', 'url' => "http://example.com", 'image_url'=> "img.png", 'attributes'=> {'target'=> '_blank'}}
- _h2 = {'title' => 'Title2', 'url' => "http://example2.com", 'image_url'=> "img2.png"}
- $data_list = [_h1, _h2]
- class Model; def data() $data_list end end
- #model = Model.new
- for item in #model.data
%a.menu-item{:href => item['url'],
:target => (defined? item['attributes']['target']) ? item['attributes']['target'] : nil}
Note here that I am using hash accessors. Depending on your your objects are set up, what framework you are using, you may use what i did, item.url, item.get('url'), etc.
You can test it out with haml test.haml test.html
Hope that gets you started.
This is a very simple question.
I have a Html.helper:
#Html.DisplayFor(modelItem => item.Text)
How to I cut down the string from item.Text to a specific length? I wish you could do a SubString or something directly on the item.Text.
If youre wondering why I want this, its because the strings are very long, and I only want to show a bit of it in like the index view etc.
I needed the same thing and solved the case with the following lines.
<td>
#{
string Explanation = item.Explanation;
if (Explanation.Length > 10)
{
Explanation = Explanation.Substring(0, 10);
}
}
#Explanation
</td>
If your string is always larger than 10, you can rule out:
if (Explanation.Length > 10)
{
Explanation = Explanation.Substring(0, 10);
}
And directly write:
string Explanation = item.Explanation.Substring(0, 10);
Also I recommend adding .. for strings larger than the limit you give.
There are 3 possibilities that could be considered:
Strip the text in your mapping layer before sending it to the view (when converting your domain model to a view model)
Write a custom HTML helper
Write a custom display template for the given type and then 3 possibilities to indicate the correct display template: 1) rely on conventions (nothing to do in this case, the template will be automatically picked) 2) decorate your view model property with the UIHint attribute 3) pass the template name as second argument to the DisplayFor helper.
You could just add a property onto your view model that does the truncation of the string and display that instead:
// View model
public string TextShort { get { return Text.Substring(0, 10); } }
// View
#Html.DisplayFor(modelItem => item.TextShort)
Change
#Html.DisplayFor(modelItem => item.Text)
to
#Html.Display(item.Text.Length > 10 ? item.Text.Substring(0,10) : item.Text)
Edited : New Answer
what about
#{
modelItem.ShortText= model.Text.Substring(0, ....);
}
#Html.DisplayFor(modelItem => item.ShortText)
The prototype for DisplayFor is :
public static MvcHtmlString DisplayFor<TModel, TValue>(
this HtmlHelper<TModel> html,
Expression<Func<TModel, TValue>> expression
)
And the modelItem is a dynamic I think, so it should be possible to add anew property to the view model.