I need to know how can i change the segment by click on button ? I try with ngModel but its showing error ngModel cant bind with ion-segment. Then I import FormModule in app.module.ts But still same error. Can any one please tell how can i change the segment button on click ? Thanks
<ion-segment value="javascript">
<ion-segment-button value="python">
<ion-label>Python</ion-label>
</ion-segment-button>
<ion-segment-button value="javascript">
<ion-label>Javascript</ion-label>
</ion-segment-button>
</ion-segment>
<button (click)="next()></button>
You seem to be using ion-segment incorrectly. You need to add in the ionChange event to the ion-segment. Follow the Ionic Docs for ion-segment: https://ionicframework.com/docs/api/segment.
Here's an example:
In your HTML file:
<ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="segment">
<ion-segment-button value="first">
<ion-label>First</ion-label>
</ion-segment-button>
<ion-segment-button value="second">
<ion-label>Second</ion-label>
</ion-segment-button>
</ion-segment>
In your typescript:
export class Example {
segment = "segment value";
constructor(public navCtrl: NavController) {}
segmentChanged(ev: any) {
// Add your logic here
}
}
Related
I created a CDropdown with a CInput inside. I don't want the dropdown auto close when I click outside because I want to copy text somewhere and paste to CInput. How can that be? Thanks for your help.
<CDropdown :show.sync="isShow">
<template>
<CInput
label="Sample label"
type="text" />
</template>
</CDropdown>
Finally I do it by read sourcecode of CDropdown and do workaround:
First, set ref to CDropdown:
<CDropdown ref="refDropdown" :show.sync="isShow">
Then override hide() function of CDropdown, be sure to call $forceUpdate() to update the directive of CDropdown:
this.$refs.refDropdown.hide = function() {
console.log("Prevented hide");
}
this.$refs.refDropdown.$forceUpdate();
Here are the codes:
<EditForm OnValidSubmit="#SubmitText" id="inputText">
<InputText #bind-Value="_InputMsgModel.Msg" />
</EditForm>
After the program ran, it turned out to be this:
<form id="inputText">
<input class="valid">
</form>
Now I wanna add an attribute type="text" to the input element, how can I achieve this?
I tried to modify the code like this:
<EditForm OnValidSubmit="#SubmitText" id="inputText">
<input type="text" #bind-Value="_InputMsgModel.Msg" />
</EditForm>
Meanwhile, now visual studio reports an error:
I can not bind the model anymore.
I need to set the type to text for needing to set the keyboard in mobile correctly.
How can I solve this? Thank you.
What is wrong with this code:
<EditForm Model="#_InputMsgModel" OnValidSubmit="#SubmitText" id="inputText" >
<InputText #bind-Value="#_InputMsgModel.Msg" />
</EditForm>
Run this code with the above:
#code {
InputMsgModel _InputMsgModel = new InputMsgModel();
private void SubmitText()
{
Console.WriteLine(_InputMsgModel.Msg);
}
public class InputMsgModel
{
public string Msg { get; set; } = "My new message";
}
}
Do you see the text "My new message" in the text box ? I believe you do... All is well, and the two-way binding mechanism works well. Go and see now the Html...it's still <input class="valid"> which does not reflect the real state of the text box. Think about it...
Update: Of course you can use the following:
<EditForm Model="#_InputMsgModel" OnValidSubmit="#SubmitText" id="inputText" >
<input type="text" #bind-value="#_InputMsgModel.Msg" />
</EditForm>
Important: The error "The attribute names could not..." is triggered because you use capital "V" in #bind-Value. You should use lower case: #bind-value. This is because your using input 'Html element' here, and it has a value attribute, not a Value attribute. But when you use the InputText Component, the capital Value in #bind-Value refers to a Value property defined in the component.
Is it possible to dynamically define the type of an element inside a custom components template at runtime?
I'd like to avoid duplication of the inner contents of the button and a element in the following example:
<template>
<button if.bind="!isLinkBtn">
<span class="btn-icon">${icon}</span>
<span class="btn-text">${contentText}</span>
</button>
<a if.bind="isLinkBtn">
<!--
The content is a 1:1 duplicate of the button above which should be prevented
somehow in order to keep the view DRY
-->
<span class="btn-icon">${icon}</span>
<span class="btn-text">${contentText}</span>
</a>
</template>
Is it possible to write something like this:
<template>
<!--
The type of element should be defined at runtime and can be a standard HTML "button"
or an anchor "a"
-->
<element type.bind="${isLinkBtn ? 'a' : 'button'}">
<span class="btn-icon">${icon}</span>
<span class="btn-text">${contentText}</span>
</element>
</template>
I'm aware of dynamic composition with <compose view="${widget.type}-view.html"></compose> but as far as I know, this won't allow me to create default HTML elements but only custom components, correct?
I've asked this question on the Aurelia Gitter where Erik Lieben suggested to use a #processContent(function) decorator, replace the content within the given function and return true to let Aurelia process it.
Unfortunately I don't know how to actually apply those instructions and am hoping for some alternative approaches here or some details about how to actually accomplish this.
Edit
I've created a corresponding feature request. Even though possible solutions have been provided, I'd love to see some simpler way to solve this ;)
When you want to reuse HTML snippets, use compose. Doing so does not create a new custom element. It simply includes the HTML at the location of each compose element. As such, the view-model for the included HTML is the same as for the element into which it is composed.
Take a look at this GistRun: https://gist.run/?id=36cf2435d39910ff709de05e5e1bedaf
custom-link.html
<template>
<button if.bind="!isLinkBtn">
<compose view="./custom-link-icon-and-text.html"></compose>
</button>
<a if.bind="isLinkBtn" href="#">
<compose view="./custom-link-icon-and-text.html"></compose>
</a>
</template>
custom-link.js
import {bindable} from 'aurelia-framework';
export class CustomLink {
#bindable() contentText;
#bindable() icon;
#bindable() isLinkBtn;
}
custom-link-icon-and-text.html
<template>
<span class="btn-icon">${icon}</span>
<span class="btn-text">${contentText}</span>
</template>
consumer.html
<template>
<require from="./custom-link"></require>
<custom-link content-text="Here is a button"></custom-link>
<custom-link is-link-btn.bind="true" content-text="Here is a link"></custom-link>
</template>
You may want to split these into separate elements, like <custom-button> and <custom-link> instead of controlling their presentation using an is-link-btn attribute. You can use the same technique to reuse common HTML parts and composition with decorators to reuse the common code.
See this GistRun: https://gist.run/?id=e9572ad27cb61f16c529fb9425107a10
Response to your "less verbose" comment
You can get it down to one file and avoid compose using the techniques in the above GistRun and the inlineView decorator:
See this GistRun: https://gist.run/?id=4e325771c63d752ef1712c6d949313ce
All you would need is this one file:
custom-links.js
import {bindable, inlineView} from 'aurelia-framework';
function customLinkElement() {
return function(target) {
bindable('contentText')(target);
bindable('icon')(target);
}
}
const tagTypes = {button: 'button', link: 'a'};
#inlineView(viewHtml(tagTypes.button))
#customLinkElement()
export class CustomButton {
}
#inlineView(viewHtml(tagTypes.link))
#customLinkElement()
export class CustomLink {
}
function viewHtml(tagType) {
let result = `
<template>
<${tagType}${tagType === tagTypes.link ? ' href="#"' : ''}>
<span class="btn-icon">\${icon}</span>
<span class="btn-text">\${contentText}</span>
</${tagType}>
</template>
`;
return result;
}
Sorry, I was doing 2 things at once while looking at gitter, which I am not good at apparently :-)
For the thing you wanted to accomplish in the end, could this also work?
I am not an a11y expert or have a lot of knowledge on that area, but from what I understand, this will accomplish what you want. The browser will look at the role attribute and handle it as a link or button and ignores the actual element type itself / won't care if it is button or anchor it will act as if it is of the type defined in role.
Then you can style it like a button or link tag with css.
<a role.bind="type"><span>x</span><span>y</span></a>
where type is either link or button, see this: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role
For normal HTML input tag,disabling autocomplete is simple as given below:
<input type="email" name="email" autocomplete="off">
Whereas its does not work for Struts tags given below:
<html:text property="" styleId="Field" maxlength="4" size="4" tabindex="14"
onblur="check(this);" value="" />
How to disable autocomplete for Struts tags?
Autocomplete attribute is not passed through to the rendered HTML by the tag.
You can do so by writing your own custom tag that extends the tag to accept the autocomplete attribute and pass it through to the rendered tag.
check these links ::
Struts 2 + Disable Form Autocomplete
http://www.coderanch.com/t/54020/Struts/form-input-tags-turning-autocomplete
I've met the same issue. Editing the tld attibutes did not help me. I resolved it by adding the attribute via JavaScript code. Here is an example:
<bean:define id="autoComplete" scope="request" type="java.lang.String"
value="<%=String.valueOf(ApplicationConfiguration.getAutoComplete()) %>" />
<script>
var ttip;
var ttip2;
Ext.onReady(function() {
var form = document.forms['formName'];
var elem = form.elements["passortField"];
elem.setAttribute( "autocomplete", "${autoComplete}" );
ApplicationConfiguration.getAutoComplete() - returns either on or off, depending on application configuration
Another option is to write your Own TextTag class something like this:
public class TextTagNoAutoComplete extends BaseFieldTag {
public TextTagNoAutoComplete() {
super();
this.type = "text";
doReadonly = true;
}
protected void prepareOtherAttributes(StringBuffer handlers) {
prepareAttribute(handlers, "autocomplete", "false");
}
}
and point textnac to this class in your tld mapping! ..and Viola ! Not the best reusable code. Provided the fact that, Struts 1.x is in no way going to be revisited, this sortta monkey patching is more than enough in my point of view :)
You can use redisplay="false" which is the equivalent in struts-html for autocomplete.
We can use the attributes which are not supported in <htm-text> inside \"
<html:text property="userName" styleId="firstname\" placeholder=\"Email*\"
autocomplete=\"off" styleClass="ql-inpt" readonly="true" />
I am trying to create a simple HTML Metro App for Windows 8. I want to display a list view, and based on the clicked item display different content on the screen. It sounds trivial, right?
But it doesn't work! Here is my code:
<div id="frameListViewTemplate" data-win-control="WinJS.Binding.Template">
<img data-win-bind="src: picture" class="thumbnail" />
</div>
<div id="basicListView" data-win-control="WinJS.UI.ListView"
data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#frameListViewTemplate'),onselectionchanged : handler}">
</div>
Than in the defult.js
var myListView = document.getElementById("basicListView").winControl;
myListView.addEventListener("selectionchanged", handler);
And the handler:
function handler() {
console.log("Inside the handler : ");
}
handler.supportedForProcessing = true;
So the handler is never called. My questions are: How can I add an event listener and its handler to the listview control.
How can I recognize which element on the list view was clicked.
P.S.
The listview is displayed properly in my app.
Thank you for help,
J
To get the item that is "clicked", you need to use itemInvoked. Selection changed would happen when the user cross slides on the item to select it, rather than taping/clicking to "invoke" it.
http://msdn.microsoft.com/en-us/library/windows/apps/br211827.aspx has some basic details.