I am trying to hide a div when i clicked on outside it, below is my div
<div ng-show="item.showLimit" class="set-limit">
<input type="text" ng-model="item.newConcLimit" />
<div>
<button type="button" ng-click="item.newConcLimit = 0;">No Limit</button>
<button ng-disabled="!(item.newConcLimit >= 0)" type="button" ng-click="setConcLimit(item);">OK</button>
</div>
</div>
in controller I'm trying to set item.showLimit = false in window click function but it is not setting.
Try this out.
$(window).click(function(e){
$scope.item.showLimit = false;
});
Make sure you are adding this too. Otherwise the div will hide if you click inside the division also.
$('.set-limit').click(function(e){
e.stopPropagation();
});
Related
I am using angular 1.3 with strap modal dialog and the form inside it.
There are 2 buttons: OK and Cancel.
Cancel works as expected - it closes the modal.
But on OK the dialog is not closed; however, the form is processed as expected.
The code below shows the model and the code which instantiates the modal dialog.
I am using button type=submit on OK to process the form.
The $modal.showTemplate has 2 parameters:
1) HTML (code below)
2) callback which shall know which button was used: OK or Cancel.
For some reason, this callback is invoked only on Cancel.
I tried to fix it by using ng-click="$close(true) on OK button
instead type=submit but it does not help.
Question: how to close the modal dialog on OK?
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog ">
<div class="modal-content">
<div ng-controller="externalController">
<form
role="form"
name="detailForm"
ng-submit="submit()"
>
<div ng-controller="internalController">
... some form fields are here ...
<button class="btn" ng-click="$close(false)">
Cancel
</button>
<button class="btn" type="submit">
OK
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- invoking the modal defined above: -->
$modal.showTemplate(htmlTemplate,
function(confirm) {
console.log("callback confirm="+confirm);
if (confirm === true) {
console.log(" this point never achieved ... and modal dialog is not closed");
} else {
console.log(" this works as expected and modal dialog is closed");
}
},
);
Get rid of the submit type on your 'OK' button. Attach the ng-click directive to this same 'OK' button. On click your button will submit the form via '[externalController].submit()'. If submit() returns a promise then wait for it, otherwise then call the modal controllers 'close()';
<button class="btn" ng-click="functionThatSubmitsAndCloses()">
OK
</button>
And in your 'internal controller' you'll have that function defined on your scope
$scope.functionThatSubmitsAndCloses = function () {
[scope of externalController].submit();
$close(true); // close being defined on the instance of your modal's controller and not this internal controller.
}
Is this an older version of angular strap? I do not see showTemplate defined in their API.
I have three input elements styled as buttons. On ng-keyup I invoke a function in my controller.
Now the problem is I have to manually click on one of them to get a focus, only then keyUp works.
I tried ng-focus='focus' and then setting $scope.focus=true in controller, it didn't work.
<div class="row startButtonRow">
<div class="col col-50" align="center">
<button class="button button-dark startButton" ng-click="start()" ng-disabled="disableStart">Start</button>
</div>
<div class="col" align="center">
<input ng-focus="focus" type="button" class="button button-dark startButton" ng-disabled="disableStop" ng-keyup="stopTimer($event)">
</div>
<div class="col" align="center">
<input type="button" class="button button-dark startButton" ng-disabled="disableStop" ng-keyup="stopTimer($event)">
</div>
<div class="col" align="center">
<input type="button" class="button button-dark startButton" ng-disabled="disableStop" ng-keyup="stopTimer($event)">
</div>
</div>
Once I click Start button the symbols start appearing on three columns and I am supposed to press corresponding button (here input element with key-up) as soon a specific symbol appear. I don't want to click on the element first and then being able to use keyboard keys.
ng-keyup does not have to go on one of your input elements, you could move it to your body element, or whatever your ng-app element is, and it will still catch keypresses.
On a different note, I believe you are misunderstanding what ng-focus does. It evaluates the given expression when the input is focused, it is not telling your browser to focus that element. You will want to build a custom directive to focus your inputs, see How to set focus on input field?
You could add something like this to your controller:
var handler = function(e){
if (e.keyCode === 37) {
// left arrow
} else if (e.keyCode === 38) {
// up arrow
} else if (e.keyCode === 39) {
// right arrow
}
};
var $doc = angular.element(document);
$doc.on('keyup', handler);
$scope.$on('$destroy',function(){
$doc.off('keyup', handler);
})
My modal holds a form and I want to close the modal when the user clicks the submit button. The simplified form looks like this:
<div class='modal fade' id='{{ module.name }}Modal' role='dialog'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<form ng-submit='submitModule(module)'>
<div class='modal-body'>
...
</div>
<div class='modal-footer'>
<button type='submit' class='btn btn-primary'>Run</button>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
</div>
</form>
</div>
</div>
You can see the two buttons. The close button uses data-dismiss='modal' which works fine. But I can't use that on the submit button, because that "cancels" out the ng-submit=submitModule() submission function; the modal will close but the function won't get called.
Would the solution be to close the modal from the submitModule() function? But how can I get a hold of the modal from there?
You can append as many method calls to the (ngSubmit) i.e
form class="well" (ngSubmit)="addUserModal.hide(); addUser(model); userForm.reset()" #userForm="ngForm"
You can add one small jQuery code in your HTML file...
Add onclick attribute in button.
<div class='modal fade' id='{{ module.name }}Modal' role='dialog'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<form ng-submit='submitModule(module)'>
<div class='modal-body'>
...
</div>
<div class='modal-footer'>
<button type='submit' class='btn btn-primary' onclick="$('.modal').modal('hide')">Run</button>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
</div>
</form>
</div>
Use the Angular-UI library - Modal: download minified version here:
First include the library in your module:
angular.module('myModule', ['ui.bootstrap']);
Then, in your controller, you can close the modal within the form submit function:
$scope.submitModule = function(module) {
dialog.close(result);
// REST OF YOUR CODE TO HANDLE FORM INPUT
}
I use Angular JS library ngActivityIndicator.
I tried to show preloader inside element div instead text when button is pushed:
<div ng-activity-indicator="CircledDark">
<div ng-click="Add();" class="btn shareBtn">
<div ng-view></div>
<span>Text</span>
</div>
</div>
I posted <div ng-view></div> inside and have added directive ng-activity-indicator="CircledDark" to parent element.
When I click button, I call function that display preloader:
$activityIndicator.startAnimating();
But preloader is created outside of button:
<div ng-show="AILoading" class="ai-circled ai-indicator ai-dark-spin"></div>
This is official documantation, from here I have taken example:
https://github.com/voronianski/ngActivityIndicator#directive
How to show preloader inside button instead text Angular JS?
I think the only solution is to separate your ng-view and button, at least they do something similar in their sample page. So, in your markup you could do something like this:
<div ng-click="add()" class="btn btn-default" ng-activity-indicator="CircledDark">
<span ng-show="!AILoading">Add</span>
</div>
<div ng-view ng-show="!AILoading">{{ delayedText }}</div>
And in your controller:
$scope.delayedText = "";
$scope.add = function() {
$activityIndicator.startAnimating();
$timeout(function() {
$scope.delayedText = "Here we are!";
$activityIndicator.stopAnimating();
}, 3000);
};
Here is full Demo, you can play with CSS a little so the size of the button won't change when text is replaced by icon.
I am new to Angularjs. I have 4 buttons "edit, Reset password, ok, cancel'. When the page loads I have to show edit and Reset password buttons. When I click edit "ok and cancel " buttons should be visible and "edit and Reset password" buttons should be hidden and vice versa. But when I click "Reset password" button popup should open. How can I do this?
Here is code:
<head>
<script src="js/libs/angular.min.js"></script>
</head>
<body>
<h3 align="center">ng-Click ng-Show demo</h3>
<div ng-init="showButton=false" ng-controller="buttonController">
<button ng-show="showButton" ng-click="toggle()">Edit</button>
<button ng-show="showButton" ng-click="showPopup()">Reset Password</button>
<button ng-hide="showButton" ng-click="toggle()">OK</button>
<button ng-hide="showButton">CANCEL</button>
</div>
<script>
function buttonController($scope){
$scope.toggle=function(){
$scope.showButton=!$scope.showButton;
};
$scope.showPopup=function(){
window.alert("Do want to reset?");
}
}
</script>
</body>
You can use ng-hide and ng-show for that.
<input ng-hide = "someVariable"> abc </input>
If "someVariable" is true then this input element will get hidden and will be visible if it is false.
For more: https://docs.angularjs.org/api/ng/directive/ngHide