I have a situation where I want to disable the button for a few seconds when clicked. Here is the code for button:
<button uib-popover="Create TO" popover-trigger="mouseenter" data-ng-click="createTransportOrder(item.confirmed_price_id)" data-ng-disabled="item.transport_order_id || !item.confirmed_price_id" class="btn btn-info btn-xs">
<i class="fa fa-truck"></i>
</button>
And here is the createTransportOrder method:
$scope.createTransportOrder = function (priceResponseId) {
var priceResponseIds = [priceResponseId];
PriceRequestsModel.createTransportOrdersByIds(priceResponseIds).then(
function (response) {
$scope.messages = response.messages;
updateSelectedPriceRequests();
getPriceRequests();
},
function (response) {
$scope.messages = response.messages;
}
)
};
I have tried a couple of things but in vain. How can I do this?
You can add setTimeout at the end of createTransportOrder
this.button.nativeElement.disabled = true;
setTimeout(function(){
this.button.nativeElement.disabled = false;
},5000);
Add #mybutton to your button <button (click)="yourclick()" #mybutton>Your button</button>
add variable #ViewChild('mybutton') button; to your component
Stackbliz demo code: https://stackblitz.com/edit/angular-disable-5second
With angular 1.4 you can change to
Set an id to your button as <button id="mybutton">
Add these code to below of click function.
document.getElementById('mybutton').disabled = true;
setTimeout(function(){
document.getElementById('mybutton').disabled = false;
},5000);
Related
For some reason, my form does not want to reset after submit. I have a button with type submit and a button with type button. When using the button with type button, the form resets, but it does not with the other button.
I'm also using var vm = this.
The code for subtmitting:
vm.submit = function(form) {
if (!form.$invalid) {
vm.showQuestion(vm.indexOfQuestion);
vm.putAnswer();
form.$setPristine();
}
}
<button class="button" type="submit" ng-click="vm.submit(testForm)">
Volgende vraag
</button>
The code for button type button:
vm.resetForm = function(form) {
form.$setPristine();
}
<button class="button" type="button" ng-click="vm.resetForm(testForm)">
Test
</button>
My question is, why does the form not reset when $setPristine() is used in a subtmit button, but it works on a normal button? And how do I make it so it does reset after submitting after clicking the submit button?
I'm unsure what the reason is of why it works, but resetting the form by using $setPristine() works by adding a $timeout function.
vm.submit = function(form) {
if (!form.$invalid) {
vm.showQuestion(vm.indexOfQuestion);
vm.putAnswer();
$timeout(function() {
form.$setPristine();
});
}
}
I have repeated data in a table like
<td>{{todo.title}}</td>
<td>
<button ng-show="loader">Deleting...</button>
<button ng-hide="loader" ng-click="delete(todo.id)">Delete</button>
</td>
Js code:
$scope.loader = false;
$scope.delete = function(id) {
$scope.loader = true;
$http.delete(url).success(function() {
$scope.loader = false;
})
}
It's working for deleting record but deleting... Button shows for every row. I can't handle for current row.
Use loader as todo property
like this
<button ng-show="todo.loader">Deleting...</button>
<button ng-hide="todo.loader" ng-click="delete(todo)">Delete</button>
JS
$scope.delete=function(todo){
todo.loader=true;
$http.delete(url).success(function(){
todo.loader=false;
})
}
DEMO
I have multi page form that has a back button built in. I want to change state when chapterID reaches 0.
$state.go executes but then redirects back to gn.newChapter state
HTML:
<a ui-sref="gn.newChapter({chapterID: id})" class="btn btn-primary" ng-click="goBack()">Go Back</a>
Controller:
$scope.goBack = function() {
if (newChapterService.getChapterState() === 0) {
$state.go('gn.createGNForm');
}
else {
$scope.id = newChapterService.goBackChapter();
}
};
<a class="btn btn-primary" ng-click="goBack()">Go Back</a>
$scope.goBack = function() {
if (newChapterService.getChapterState() === 0) {
$state.go('gn.createGNForm');
}
else {
$scope.id = newChapterService.goBackChapter();
$state.go('gn.newChapter({chapterID: $scope.id})'); // I don't know your predefined paths. so just suggesting this as an answer. This line might be different according to your need.
}
};
i'm not an angular master and i try to do something.
Suppose a fonctionality like "i like / i dislike".
When you're on an article, you can click on the "i like" button. If you already liked the article, this button is hidden and the "i don't like anymore" appears.
<button ng-hide="like" class="btn btn-success btn-xs pull-right" ng-click="iLike()">I like</button>
<button ng-show="like" class="btn btn-danger btn-xs pull-right" ng-click="notLike()">Don't like anymore</button>
Everything work as expected when i reload the page but not on click action.
Basically my iLike function looks like and i think miss behavior comes from a missing return or an event to fire :(
$scope.iLike = function(){
##hereIDoAnAPICalls##, function(){
$scope.like = false;
}, function(){
$scope.like = true;
}
}
Try to wrap scope variable assignment into apply, I think it could help since API call is probably asynchronous and click event is invoked from outside of angular
$scope.iLike = function() {
APIcall.then(function () {
$scope.$apply(function() {
$scope.like = false;
});
}, function () {...the same...});
};
I have a resource that returns a JSONP payload:
app.factory('JsonService', function($resource) {
return $resource('//123.456.7.890\\:8888/user/:id/:model',
{'page': ':page', 'limit' : ':limit', 'jsonp_callback' : 'JSON_CALLBACK'},
{})
});
Which gets called by my controller:
app.controller("followersCtrl", function ($scope, $dialog, JsonService) {
...
$scope.user_id = $.globals.authed_user_id;
$scope.model = "followers"
$scope.loadJSONP = function (getPage) {
JsonService.get({
id: $scope.user_id,
page: getPage,
limit: $scope.pagination_limit,
model: $scope.model
},
function (data) {
$scope.followers = data;
$scope.noOfPages = data.page_count;
$scope.currentPage = data.page;
});
};
$scope.loadJSONP(1);
$scope.pageChanged = function (page) {
$scope.callbackPage = page;
$scope.loadJSONP(page);
};
});
Then I loop over the data returned/stored in $scope.followers:
<div ng-controller="followersCtrl">
...
// Code related to the modal omitted
...
<div ng-repeat="user in followers.data">
<img class="img img-polaroid" ng-src="{{user.image_url}}"/>
<p>{{ user.username }}</p>
<button class="btn btn-disabled" ng-show="user.is_mutual">
You Are following this user
</button>
<button class="btn btn-primary" ng-show="!user.is_mutual">
You Aren\'t following
</button>
<p>{{user.total_followers}}</p>
</div>
...
// Code related to the modal omitted
...
</div>
That all works as expected, but for the life of me I cannot figure out how to have the "You are not following" button change the value that's reflected inside the corresponding {{post.total_followers}} expression on click. Ideally, I would like to perform a PUT to actually perform the follow action, but I decided to start small and just update the value, to no avail.
Any help is appreciated. Thank you.
Is ng-click what you're looking for?
HTML:
<button class="btn btn-primary" ng-show="!user.is_mutual" ng-click="follow(user)">
You Aren\'t following
</button>
JS:
app.controller("followersCtrl",
function ($scope, $dialog, JsonService) {
$scope.follow = function(user){
// code for posting to server-side follow action
// and updating the total_followers
// $scope.user.total_followers++; // this should be ideally incremented on success callback
}
}
);