I have a search bar at the header and wish to be able to link a click event to one icon.
Here is the header code:
<ion-nav-title>
<div class="item-input-inset" style="padding:5px">
<label class="item-input-wrapper" style="background-color:#FFF">
<i class="icon ion-ios-search placeholder-icon" style="font-size:20px"></i>
<input ng-model="search_text" type="text" placeholder="Search"
style="width:100%;height:33px"
focus-me my-enter="new_search(search_text)">
<i class="icon ion-android-close placeholder-icon" style="font-size:20px;" ng-click="clear_search_text()"></i>
</label>
</div>
</ion-nav-title>
As can be seen, there are two icons. the second one has a ng-click that never fires once tapped. In fact, when clicked, it's like i had clicked on the input.
Is there any solution for this situation?
Related
I'm trying to create 2 buttons, power on and power off, that have click events for their respected statuses. I have them as radio buttons, but i wanted them to be submitted on click without a submit button, like a switch. So i decide to just have them as pseudo forms, and add click listeners to each to release the event data.
I was testing this by logging the click, and when i click on, the console logs 2 clicks, despite clicking it once.
component snippet
onClick(data: any) {
console.log('click');
}
html snippet
<div class="btn-group" data-toggle="buttons">
<label
class="power-toggle on btn btn-lg btn-success"
(click)="onClick($event)"
>
<input type="radio" name="power" value="power-on" autocomplete="off">
ON
</label>
<label
class="power-toggle off btn btn-lg btn-danger active"
(click)="onClick('off')"
>
<input type="radio" name="power" value="power-off" autocomplete="off" checked>
OFF
</label>
</div>
why is this happening? how can i fix it? is there a way to submit the radio value as is without a submit button or turning the button into a submit button?
You need to bind the click function to the input and not the label.
Please find the plunker example here : https://plnkr.co/edit/Fmhs8xQupAynJfmwtk5y
<div class="btn-group" data-toggle="buttons">
<label
class="power-toggle on btn btn-lg btn-success"
>
<input (click)="onClick($event)" type="radio" name="power" value="power-on" autocomplete="off">
ON
</label>
<label
class="power-toggle off btn btn-lg btn-danger active"
>
<input (click)="onClick('off')" type="radio" name="power" value="power-off" autocomplete="off" checked>
OFF
</label>
</div>
Below is the template code to a page in my app. You can see that I am using the ion-nav-bar. I would like to disable the ion-nav-bar on the login screen and to not have a back button to go back to the login screen.
The best solution I can come up with is to remove <ion-nav-bar> from the login page and add an ng-show directive to <ion-nav-back-button> that tests if the previous page is login and hides the tag in that case.
Is there any better design pattern for this?
<ion-view view-title="Sales">
<ion-pane>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-content class="padding">
<ionic-datepicker input-obj="datepickerObject">
<button class="button button-block button-positive"> {{datepickerObject.inputDate | date:'dd - MMMM - yyyy'}}</button>
</ionic-datepicker>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Amount" ng-model="data.amount">
</label>
</div>
<button class="button button-block button-stable" ng-click="enter()">Save</button>
</ion-content>
</ion-nav-bar>
</ion-pane>
</ion-view>
To your ion-view, you need to add the hide-nav-bar directive and set it to true to hide it on this page.
Like so
<ion-view hide-nav-bar="true">
This will hide the whole nav-bar when you enter the view
For hiding back button just add this tag to your view just like this
<ion-view title="Login" hide-back-button="true">
See this plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview
When using a ng-form tag on an ng-repeat which contains a radio button group, the radio buttons are linked so if you check a radio button in one ng-repeat it will deselect in all the other ng-repeats. This puzzles me as the model of the ng-repeat is otherwise isolated from the other items. This is not only an issue when using ng-repeat. It also occurs when having multiple instances of a custom directive with isolated scope which renders a
<div ng-form name="myForm">
In the Plnkkr try adding a number of items and check the radio buttons on some of the items.
They should be independent, but they are not.
Is this a bug in Angular?
If not why does it work this way and how can I work around it?
<form name="mainForm" ng-submit="submitAll()">
<ul>
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" name="myRadio" value="r1" ng-model="item.radio" /> r1
<input type="radio" name="myRadio" value="r2" ng-model="item.radio" /> r2
<span ng-show="subForm.name.$error.required">required</span>
<button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item)">Submit One</button>
</li>
</ul>
<button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
</form>
Those radio buttons are "connected" by a browser since you are giving them the same name. Just drop the name attribute and things start to work as expected:
http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=preview
As per your last comment, I have tried this out and it works. I'm not using the built-in angular validation but I believe it works all the same and is very simple
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" value="r1" ng-model="item.radio" /> r1
<input type="radio" value="r2" ng-model="item.radio" /> r2
<span ng-show="item.radio==''">required</span>
<button type="button" ng-disabled="subForm.$invalid || item.radio==''" ng-click="submitOne(item) ">Submit One</button>
</li>
See my working example at http://wiredbeast.com/coolframework/stackover.html
The trick is using ng-show="item.radio==''" to show the validation error and to disable the "Submit One" button.
In my honest opinion angular form validation and browser validation with checkboxes and radios is not very solid.
So I have three bootstrap buttons in a row, all inside of a form:
a <button type="submit" class="btn btn-primary"> that submits the form
a <a class="btn btn-inverse"><i class="icon-edit icon-white"></i> Edit</a> button right next to it.
a <a class="btn btn-success"><i class="icon-plus icon-white"></i> New</a> button right next to that one.
For some reason, the "Edit" text is in gray, while the text of the other two buttons is white -- any ideas why this might be happening?
You may either look upon as suggested in #Marronsuisse comment or you can use
<a class="btn btn-inverse" style="color:#FFF">
<i class="icon-edit icon-white"></i> Edit</a>
Also, beg me pardon, but it might be looking as gray to your eyes due to it's black background..you can verify the same with this
<a class="btn btn-inverse" style="font-weight:bolder">
<i class="icon-edit icon-white"></i> Edit</a>
this is the dom source of the button I want to click on
<div class="footer clearFloat">
<div class="left">
</div>
<div class="right">
[P]
[-575063738]
[SB_XML]
<input class="button" value="Next step" id="dpTransportResultSelectLink[7]" type="submit">
</div>
</div>"
This is the x-path "/html/body[#id='transport-results']/div[#id='master']/div[#id='master_center']/div[#id='page_content']/div[#id='contentPad']/form[#id='fare_5']/div[2]/div[2]"
How do I frame my locator using "[SB_XML]", irrespective of the form Id?
//*[contains(text(),'[SB_XML]')]/following-sibling::input[1]
I've tested it as an xpath but not in Selenium
lemme know how it goes