I'm making a functional button in my ionic app, and I want to know what I need to do to make a button centered on a blank ionic app load another page when clicked.
I have experimented with adding ng-click="loadPage()" to the button in my index.html file. I defined
$scope.loadPage = function() { $state.go(page.html)} in my controller.
switch your button with an anchor
<a class="btn btn-full" ui-sref="your.state">your text</a>
Related
I have a bootstrap popover which has 2 buttons Yes or No. Based on the response from the user i need to call AngularJS service function. How do i do that??
Popover is created only if it meets a certain criteria (like existence of duplicate records)
HTML code looks something like below, but currently doesn't have 2 buttons & still need to work on it
$(document).ready(function () {
if (DuplicateRecord) {
$('[data-toggle="popover"]').popover();
}
});
<button href="#" data-toggle="popover" title="Popover Header"
data-content="Some content inside the popover" data-trigger="click"
data-html="false" data-placement="left">
Toggle popover
</button>
Looks like you are mixin concepts (or maybe I'm not getting your question), you can have a popover but the data-trigger="click" makes showing the popover on the click event and you wanna use that event to call the service method. Change the popover trigger to hover and then use the click event to call your service. Something like this just as an idea, the snippet is not tested.
<button
type="button"
data-toggle="popover"
title="Popover Header"
data-content="Some content inside the popover"
data-trigger="hover"
data-html="false"
data-placement="left"
ng-click="$ctrl.callSomeMethod()"
>
Toggle popover
</button>
You can take a look to UI Bootstrap lib which has a directives for the Bootstrap's components equivalents.
Ionic v1
I was using ui-sref to simply navigate from one page to another in my ionic app, but recently have to switch to $state.go because pressing button closes the app. I figured it out that states are not maintained in ui-sref.
So my question is do I have to always use $state.go if I just want to simply navigate between pages without closing my app and create a separate function in controller to go to next page.
Code for ref
<button class=" button button-assertive" ui-sref="nextPage">Next</a>
or
<button class=" button button-assertive" ng-click="gotonext()">Next</a>
JS
$scope.gotonext = function(){
$state.go('nextPage')
};
Try this :-
$scope.gotonext = function(){
$location.path("/nextPage");
};
I have a <div id="section1"> </div> at the bottom of my page.
And I have a button I want this functionality in button
$location.hash('section1');
$anchorScroll();
It is working as I want but it is giving me ugly url all this is in single page than why my url is updating?
my expecting Url is :
/Order/BuildOrder
when page load I get this but when I click button screen took me to my anchor div with id='section1'
but now url change to /Order/BuildOrder#!#section1
How can I remove #!# as this is scrolling on a single page. href location is not changing
On click of following button PDF download starts in the browser
<input name="SavNSend" class="gradient_button" id="printPdf" type="button" value="Save to PDF" ng-click="savePdfRP()"></input>
But what I want is to open a new tab in order to download the pdf. Can this be achieved using ng-click with button or ng-click with tag.
If you want to open a new tab/window. You need to use lower level services such as $window.
ng-click="savePdfRP()"
$scope.savePdfRP= function() {
$window.open(url, windowName);
}
Another approach is to bind the href of the anchor.
<a class="gradient_button" id="printPdf" ng-href="{{ url }}" target="_blank">Save to PDF</a>
$scope.url = 'http://www.google.com';
I have a simple angular JS app in which there is a main container html view page, a left menu for navigation between views.
//Left panel menu links
<li><a href ng-click="vm.showPanel('View1')">View1</a></li>
<li><a href ng-click="vm.showPanel('View2')">View2</a></li>
<li><a href ng-click="vm.showPanel('View3')">View3</a></li>
//JS function to load view
vm.showPanel = function (panelName) {
hideAllPanels();
if (panelName == 'View1') {
vm.isView1Visible = true;
}
}
The above is working fine, now what I want to do is add a button in View1.html called "Next" which will load next view that is view2.html & so on.
Please note both view1.html % view2.html are within a container html page.
Can anyone show me what is the angular way of doing this?
Regards
Maintain one variable which contains Views html list, like below, and that can be render it by using ng-repeat
Controller
$scope.viewList = ['View1','View2','View3'];
HTML
<li><a href ng-repeat="view in viewList" ng-click="vm.showPanel(view )">Next</a></li>
More elegant solution would be to re implement you whole show tab and hide tab logic using ui-router or angular-route as it looks like pure SPA thing.
Plunkr for Angular Route
Plunkr for Angular UI-Router