ng-disabled not working with $().button('loading') & .button('reset'). How to fix this issue?
Also I have Plunker.
You can bind button text to the scope and modify it according to the relevant state.
HTML:
<button id="someButton" class="btn btn-default btn-sm"
ng-disabled="!someArray.someBool" ng-click="someClick()">{{button}}</button>
Before click - Button
While loading - Loading...
After loading - Loaded
I used a $timeout function of 2 seconds instead of making a real async request.
Controller:
$scope.someClick = function() {
$scope.button="loading...";
$timeout(function(){
$scope.someArray.someBool = false;
$scope.button="loaded";
}, 2000);
}
working plunker
Related
I have a list of customers each customer have button more info.
I want , when i click on it then showing bootstrap modal by AngularJs controller and then request data by $http.post and getting some more info about this customer and showing info inside modal.
How can i do this purpose ?
this button :
<button type='button' class='btn btn-primary btn-sm'
data-ng-click='moreinfo(customer.id)' >more info</button>
You can first pass each customer info variable to each more info.
Button like this :
<button type='button' class='btn btn-primary btn-sm btnmargin'
data-toggle='modal' data-target='#cInfo' data-ng-click='moreinfo(customer)'
>more info</button>
then you should write this code inside controller :
$scope.customerinfo=[];
$scope.moreinfo= function(customer){
$scope.customerinfo= customer;
};
Html bootstrap modal :
<!-- Modal start -->
<div class='modal fade' id='cinfo' tabindex='-1' role='dialog'
aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog modal-lg' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'>
<span aria-hidden='true'>×</span>
<span class='sr-only'>Close</span></button>
<h4 class='modal-title text-danger'
id='myModalLabel'>customer info</h4>
</div>
<div class='modal-body'>
{{customerinfo.firstName}}
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default'
data-dismiss='modal'>close</button>
</div>
</div>
</div>
</div>
<!-- Modal end -->
Now you can click on each row button more info and see info in inside modal body.
Use ngDialog instead of bootstrap modal.
It is easy to implement in angularjs and you can have different controller for it as well and you can definitely transfer data from main page to this ngDialog.
https://github.com/likeastore/ngDialog
I will suggest you to go with ui-bootstrap but looking at other answers and considering you do not want to add any more JS library/plugin
Hope this helps you
Add a directive called bootstrap-modal as following
app.directive('bootstrapModal', ['$rootScope', '$http', function ($rootScope, $http) {
"use strict";
return {
restrict: "A",
//add isolated scope if you want
//scope: {
//},
link: function (scope, element) {
scope.$on('showModal', function (event, object) {
//fire your ajax here
$http.get('url').then(function(response){
//process your response alter DOM and show modal
element.modal('toggle');
});
});
}
};
}]);
and in your moreInfo function in controller
$scope.moreInfo = function(){
$rootScope.$broadCast('showModal', dataToPassToListener)
}
You should use the directive with the div which you want to show as modal. As in the same div where you would have given role="dialog" if you would have used simple bootstrap.js
I know that you don't want more JS plugin but I suggest you to use the UI Bootstrap for Angularjs:
https://angular-ui.github.io/bootstrap/
It's basically a set of pre-defined directives you can use to load Bootstrap component.
In your case, the thing can end like that:
<button type="button" class="btn btn-primary" ng-click = "moreinfo(customer.id)"> More Info </button>
In your controller :
angular.module('myApp').controller('CustomerInfoCtrl',['$uibModalInstance','$scope', function($uibModalInstance,$scope){
$scope.moreinfo = function(id){
var InfoModal = $uibModalInstance.open({
templateUrl : 'route/to/my/template.html,
controller: 'MoreInfoCtrl',
scope: $scope,
resolve: {
customerId : function(){
return id;
}
}
});
InfoModal.result.then(function(){
//callback when modal closed
},function(){
//callback when clicked on cancel to dismiss the modal
});
}]);
Then you create another controller, MoreInfoCtrl:
angular.module('myApp').controller('MoreInfoCtrl',['$http','$scope','id', function($http, $scope, id){
//Do your http call with the variable id (i.e the customer.id )
}]);
You have plenty of options. You can easily pass variables, scope or do callback process.
I'm using it a lot in a project and it really helps a lot.
I suggest you to try it. And it's not really heavy (from above link):
Whichever method you choose the good news that the overall size of a
download is fairly small: 122K minified for all directives with
templates and 98K without (~31kB with gzip compression, with
templates, and 28K gzipped without)
is it possible to trigger the popover directive on an event? I'm trying to look for a string character and trigger a custom template, however, I cannot find a way to get my way around it, I only see custom attributes attached to a button.
You can use popover-is-open to display the popover on a given event.
Here is an example, where a timeout is used to simulate an event that shows the popover:
Markup:
<div ng-controller="PopoverDemoCtrl as vm">
Wait for 3 seconds for the event to happen...
<div uib-popover="Read the message!"
popover-title="Hello World!"
popover-placement="bottom"
id="popover"
class="btn btn-default spaced"
popover-is-open="vm.showPopover">
Popover
</div>
</div>
JavaScript:
function PopoverDemoCtrl($timeout) {
var popoverDemoCtrl = this;
popoverDemoCtrl.showPopover = false;
$timeout(function () {
popoverDemoCtrl.showPopover = true;
}, 3000);
}
PopoverDemoCtrl.$inject = ['$timeout'];
angular
.module('myApp', ['ui.bootstrap'])
.controller('PopoverDemoCtrl', PopoverDemoCtrl);
The full Fiddle: http://jsfiddle.net/masa671/gtgqof2k/
I'm using AngularStrap with bootstrap.
I have a modal dialog that uses it's own controller. How can I close the modal using this local controller?
I instantiate the controller on a button like this:
<button type="button"
class="btn btn-success btn-lg"
bs-modal="modal"
data-template="user-login-modal.html"
data-container="body"
ng-controller="userLoginController"
>Click here to log in</button>
and the userLoginController has this:
$scope.authenticate = function(){
this.hide(); // this doesn't work
}
This is obviously just a demo, I want it to close on successful login, but this is where the code I'd use to close it would go.
I've tried instantiating the modal programmatically (use the $modal service to create the modal) but I haven't been able to figure out how to inject the controller through that method.
If I were to do something like emit an event from the modal using the bs-modal directive, how can I reference the modal to close it?
here's my plnkr:
http://plnkr.co/edit/m5gT1HiOl1X9poicWIEi?p=preview
When in the on-click function do
$scope.myClickEvent = function () {
this.$hide();
}
Figured out a good method:
I moved the ng-controller to the TEMPLATE and instantiate the modal using the provided modal service. I then use a rootscope broad cast to let everyone know that someone successfully logged in.
new controller code:
var loginModal = $modal({template:'/template.html', show:false});
$scope.showLogin = function(){
loginModal.$promise.then(loginModal.show);
}
$scope.$on("login", function(){
loginModal.$promise.then(loginModal.hide);
});
the button just looks like this now:
<button type="button"
class="btn btn-success btn-lg"
ng-click="showLogin()"
>Click here to log in</button>
and my template has the old ng-controller in the first tag.
I am probably too late, but just wish to share my answer. If all you need is hiding the modal after form success, then bind that $hide function to one of controller varriable.
<div class="modal" data-ng-controller="Controller" data-ng-init="bindHideModalFunction($hide)">
In the controller:
// Bind the hiding modal function to controller and call it when form is success
$scope.hideModal;
$scope.bindHideModalFunction =function(hideModalFunction){
$scope.hideModal = hideModalFunction;
}
I found all of the above answers way too complicated for your use case (and mine when I ran into this problem).
All you need to do, is chain the ng-click to use the built in $hide() function that angular strap bundles.
So your ng-click would look like: ng-click="authenticate();$hide()"
Using Angular and bootstrap if you want to submit data to controller then have the modal close just simply add onclick="$('.modal').modal('hide')" line to the submit button. This way it will hit the controller and close the modal. If you use data-dismiss="modal" in the button submit never hits the controller. At least for me it didn't. And this is not to say my method is a best practice but a quick one liner to get data to at least submit and close out the modal.
<div class="modal fade" id="myModal" ng-controller="SubmitCtrl">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form ng-submit="submit()">
<input type="text" ng-model="name" />
<button type="submit" onclick="$('.modal').modal('hide')">Submit</button>
</form>
</div>
</div>
</div>
</div>
Perhaps open it with the service on click and have it close itself on the $destroy event?
$scope.openModal = function()
{
$scope.modal = $modal({
template: "user-login-modal.html",
container="body"
});
}
$scope.$on("$destroy", function()
{
if ($scope.modal)
{
$scope.modal.hide();
}
});
AFAIK, the only way to get Angular mimick a back button behavior is via a call to $window.history.back.
Now, I have a form with two buttons: submit and cancel. When I submit, I have some custom logic, and in the end I can easily call the back() method. But how could I achieve the same without a custom method for the cancel button?
This is my current html
<div class="form-group">
<button class="btn btn-primary" ng-click="save(berlet)">Ok</button>
<a class="btn btn-warning" ui-sref="jogasok">Cancel</a>
</div>
I would like to have a back() behavior when clicking the <a> tag. Are there any recommendations for it? My preferred syntax would be something like: `Cancel :)
Make a simple directive, to keep your controller free from redundant $window pollution:
PLUNKER
app.directive('goBack', function($window){
return function($scope, $element){
$element.on('click', function(){
$window.history.back();
})
}
});
<a go-back>Cancel</a>
My best idea until now is to attach the $window service to my directive, and call the back button through the $scope.
<a class="btn btn-warning" ng-click="window.history.back()">Cancel</a>
and in my directive I have
$scope.window = $window;
Below is my plunker edit.
I was able to get checkbox values. Now I'm trying to pass those checked values onclick to http or inside ng-click=deleteSelected function.
http://plnkr.co/edit/wsd3oDr3SyQXvO8Fdh5F
Can anyone help me ?
Now that you have bound the values to $scope.checked-messages, can't you just use the $scope in a click handler:
HTML:
<button id="btn-call" type="button" class="btn btn-danger" ng-click="callTheServer()">Call The Server</button>
JS (Controller):
app.controller('MainController', function($scope) {
$scope.checked_messages = [];
$scope.callTheServer = function() {
console.log($scope.checked_messages);
}
});
Here is an updated plunker.
You should wrap your form in a tag and declare your button as a submit type like this
<form ng-submit="deleteElements()">
//checkboxes stuff
<button id="btn-delete" type="submit" class="btn btn-danger">Delete</button>
</form>
Now in your controller you declare your deleteElements function :
$scope.deleteElements = function(){
console.log(this.checked_messages);
}
Answer from Davin is good but I try to avoid to bind everything to scope whenever I can.