i need a Back Button that disappears, looked at ngdisabled from AngularJS but quite the beginner.
<button onClick="history.go(-1);" >Go back</button>
Already got the back button, and i want to disable it after its been clicked?
Use
<button onClick="history.go(-1);this.disabled=true;" >Go back</button>
Assuming your button is contained by an Angular-Controller, a more Angular-approach to this problem would be something like this:
<div ng-controller="controller as ctrl">
<button ng-click="ctrl.GoBackInHistory()"
ng-disabled="ctrl.isBackButtonDisabled">
Go back
</button>
</div>
<script>
angular.module('app', [])
.controller('controller', controller);
controller.$inject = ['$window'];
function controller($window) {
var vm = this;
vm.isBackButtonDisabled = false;
vm.GoBackInHistory = GoBackInHistory;
function GoBackInHistory() {
$window.history.back(); //or $window.history.go(-1);
vm.isBackButtonDisabled = true;
}
}
</script>
Please try this.
<button ng-click="goBack" ng-disabled="backDisabled">Go back</button>
click function:
$scope.goBack = function(){
$window.history.back();
$scope.backDisabled = true; // use $rootScope to access everywhere of app.
}
Related
I'm trying to figure out how to link a button to open a new HTML component but no matter which method I've tried I cannot get it to work
First I tried a JS Function:
function openNext(){
window.location = '../nextpage.html';
}
on this button code:
<div class="content">
<button type="button" ng-click="openNext()" class="nextBtn mat-raised-button"> Next!</button>
</div>
But that didn't do anything, so tried a simple href link, still nothing.
So I thought it was something perhaps with the routing
Notice that you are only asking to load a component on the click of a button. Nothing simpler:
<div class="content">
<button type="button" ng-click="openNext()" class="nextBtn mat-raised-button"> Next!</button>
<the-html-component-you-want-to-open
ng-if="isMyComponentOpen == true"
></the-html-component-you-want-to-open>
</div>
In your controller:
$scope.isMyComponentOpen = false;
$scope.openNext = function() {
$scope.isMyComponentOpen = true;
}
On the other hand, if you are looking into switching pages in your application, or loading external dialogs/modals containing other components, then you are asking the wrong question.
I like to have this button.
When you click on it the button text should change to "Updating...".
Then two seconds later it should change to "Updated!" and the button shouldn't be clickable after that.
Current Html Button script:
<a class="btn-primary-md" id="buyButton" onclick="text = 'Updated!'">Update</a>
So to sum up, you have a button/link and onclick you'll want:
The text of that element to change.
The element to be disabled.
After two seconds the value to change again to another
value.
You can do this by extracting the JavaScript from the HTML for readability and maintainability like this:
var button = document.getElementById("btn");
button.addEventListener("click", function () {
button.disabled = true;
button.innerHTML = "Waiting...";
setTimeout(function () {
button.innerHTML = "Thank you!";
button.disabled = false;
}, 2000);
});
<button id="btn" type="button">
Click me
</button>
<input onclick="change()" type="button" value="Updated" id="buyButton" />
Javascript:
function changeBtnTxt()
{
document.getElementById("buyButton").value="Update";
}
Maybe...
<input onclick="changeBtnTxt()" type="button" value="Update" id="buyButton" />
function changeBtnTxt()
{
document.getElementById("buyButton").value="Updated";
}
This is the correct one! Sorry!
I'm trying to use a single "create" button that either opens a dialog or goes to a new page using ui-router, depending on the value of an object.
I'm not sure of the best way to accomplish this, I have something that seems to work, but I'm wondering if there's a better way. I'm currently using two buttons and an ng-if to hide the button I don't need at the time, but that seems messy to me.
Here's a very simple mock up of what I'm trying to do. Rather than actually opening a dialog or changing page content, I've just added alerts.
http://codepen.io/jwelker9/pen/QNPgyE?editors=1010
In short, I'm not sure how to get ui-sref and a dialog to play together on the same button.
HTML:
<div ng-controller = "lists-detail" ng-app="app">
<table class="listing">
<thead>
<tr>
<th>Item-Id:</th>
<th>Ordinal:</th>
<th>Type:</th>
<th>Content-Id:</th>
<th>
<button ng-if="!boolean"
class="button"
aria-label="Add list item"
ui-sref="site.lists">
Add New
</button>
<button ng-if="boolean"
class="button"
aria-label="Add list item"
ng-click="dialog()">
Add New
</button>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
JS:
var app = angular.module('app', []);
app.controller('lists-detail', function ($scope) {
//actual code looks like:
//This calls an API to determine if it is correct type or not
//If boolean is true, it should open a new dialog
//if(listType == 'Episode'){
$scope.boolean = false;
//}
$scope.goToNewPage = function() {
alert("NewPage");
}
$scope.dialog = function() {
alert("Open Dialog");
}
})
If I'm understanding your question correctly, you could just call a function when the value changes and make the decision in the function like this:
https://jsfiddle.net/tma739u9/
Angular
vm.boolean = false;
vm.watchBoolean = function() {
var decision = (!vm.boolean) ? newPage() : dialog();
}
function newPage() {
$location.path('/page');
}
function dialog() {
alert('Open dialog');
}
HTML
<input
type="checkbox"
ng-model="ctrl.boolean"
ng-click="ctrl.watchBoolean()"> Click Me
In your ng-click, you can use an Angular expression like this:
ng-click="boolean==true? dialog() : gotoNewPage()"
This is a shorthand way of saying this in Javascript:
if (boolean) {
dialog();
} else {
gotoNewPage();
}
Sounds easy and a well known question, right? I thought so as well. How do I do this in angularJS.
CSHTML
#using (Html.BeginForm("Order", "Shop", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
<div class="container" ng-app="order" ng-controller="orderController">
<button type="submit" ng-disabled="orderButtonClicked" ng-click="orderClicked()" class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button>
</div>
}
AngularJS
angular.module("order", [])
.controller("orderController", ['$scope', '$http','$filter', function ($scope, $http, $filter) {
$scope.orderButtonClicked = false;
$scope.orderClicked = function () {
$scope.orderButtonClicked = true;
}
}]);
As many others reported as well, the form is not submitting when disabling or removing the button. this answer did the same, he claims it is working, but for me is a no go.
You can assume that angular is setup correctly, disabling the button works fine.
I've never had much luck with disabling the submit button in any circumstances - even if it doesn't prevent the form from submitting, the server can get confused because it expects the name/value combination from the submit button.
Instead, I generally hide the submit button, and replace it with something appropriate:
<button type="submit" ng-show="!orderButtonClicked" ng-click="orderClicked()" class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button>
<button ng-show="orderButtonClicked" disabled class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button>
Keep in mind that even in this case, the user may be able to re-submit by hitting enter in a textbox.
Try this way:
<div ng-app="myApp" ng-controller="myCtrl">
<form>
<input type="submit" ng-disabled="orderButtonClicked" ng-click="orderClicked()">
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.orderButtonClicked = false;
$scope.orderClicked = function () {
$scope.orderButtonClicked = true;
}
});
</script>
I will put a break point there and see if orderButtonClicked is set to true when orderClicked() is triggered. Just another thought, I have experience with this issue before when I have an ng-if somewhere inside the controller scope in html. This is because angular seems to create a new scope inside that ng-if dom. The best way to avoid that is to use controllerAs and then access the scope property using controllerName.propertyName.
Does the form submit if you don't disable or remove the button? The angular documentation states that, "For this reason, Angular prevents the default action (form submission to the server) unless the <form> element has an action attribute specified."
So, depending on what you're trying to accomplish, you would have to add javascript in your .orderClicked method to make an ajax call, for example, or whatever you're trying to accomplish.
I have two buttons Start and Stop,when I click the Start button I want the Stop button to show and the Start button to be hidden vice versa when I click the Stop button I want the Start button to be shown and the Stop button to be hidden.Only one button must be shown at any one time.Here is what I tried but it doesn't seem to work.Where am I going wrong?
<span ng-hide="Model.StartEvent == true">
<button ng-click="Model.StartEvent()" id="btnEventStart">Start</button>
</span>
<span ng-show="Model.StopEvent == false">
<button ng-click="Model.StopEvent()" id="btnStopEvent" class="tooltip">Stop</button>
</span>
You could do even less
<button ng-click="goEvent();" ng-hide="going">Start</button>
<button ng-click="goEvent();" ng-show="going">Stop</button>
...
$scope.going = false;
$scope.goEvent = function(){
$scope.going = !$scope.going;
if($scope.going){
$scope.go();
}else{
$scope.stop();
}
}
you should use same variable for both...
<button ng-click="Model.toggleShow(); Model.StartEvent()" ng-show="Model.showStartEvent">Start</button>
<button ng-click="Model.toggleShow(); Model.StopEvent()" ng-show="!Model.showStartEvent">Stop</button>
Modal.toggleShow = function(){
Model.showStartEvent = !Model.showStartEvent;
}
also you can call toggle right inside the startevent/stopevent rather than having two function calls on ng-click
Html:
<div ng-controller="YourController">
<span ng-hide="EventRunning"><button ng-click="StartEvent($event)"id="btnEventStart">Start</button></span>
<span ng-show="EventRunning"><button ng-click="StopEvent($event)" id="btnStopEvent">Stop</button></span>
</div>
Use single semaphore for hide and show EventRunning
Controller:
{ ...
$scope.EventRunning = false;
$scope.StartEvent = function (event) {
event.preventDefault();
$scope.EventRunning = true;
// your code
}
$scope.StopEvent = function (event) {
event.preventDefault();
$scope.EventRunning = false;
// your code
}
... }