i have angularJS 1.5.0-rc.2
I found on the internet that i can use the directive
data-ng-disabled="Expression"
But it won't disable a button.
What i tried :
<button data-ng-disabled="false">Select</button> // don't work
<button data-ng-disabled="loaded">Select</button> // don't work
<button data-ng-disabled="loaded != false">Select</button> // don't work
Loaded is defined in my controller as $scope.loaded = false.
How can i disable a button ? Thanks
The button will be disabled only if the expression is true.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="disableBtn=true">
<button ng-disabled="disableBtn">test</button>
</div>
I make it without derective. I made it like this:
remove
In controller first of all made
$scope.disabled = true;
Than in if/else remove class disabled and change $scope.disabled = false;
I give you example with tag <a></a> this work with button simple.
And in button ng-click first made Test ng-click="disabled||usertaskctrl.removeTasksToArchive()" before make click on some you function.
Try this
1 This is direct method of implementation
<script>src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<button ng-disabled=true>test</button>
</div>
2 another way you can change the value for
<div ng-app>
<button ng-disabled=dsblBtn>test</button>
</div>
in controller inside init function
$scope.dsblBtn = true;
Always use the button tag with ng-disabled in angular js otherwise it will not work.
Related
All I want to accomplish is to show a "loading ..." when the submit button is clicked using AngularJS.
I figured that should be quite easy using
<form ng-if="!export.buttonClicked">
... various input values without ng-model
<input type="submit" value="Start export" class="btn btn-default" ng-click="export.buttonClicked=true;">
</form>
<div ng-if="export.buttonClicked">
loading...
</div>
How could I be so wrong. Seems like Angular prevents the default form submission like this. Showing the loading div works quite fine, but I need the form to be submitted (The server has to calculate a lot so it responds slowly and I would like to show loading... instead of the Button once it has been clicked)
I can't use ng-submit because I have to combine AngularJS with Razor and I don't want no ng-form or ng-model...
Any ideas?
If you have an angular controller tied to the page or div, just use a function in your ng-click like this:
<div ng-controller="sampleController" style="text-align:center">
<button ng-click="buttonClickedFunction()">Submit</button>
<p>{{message}}</p>
</div>
Then in your controller:
yourAppName.controller('sampleController', function($scope) {
$scope.buttonClickedFunction = function() {
$scope.message = "Loading...";
// Whatever else you wish to do with your button/function.
};
});
This puts loading on the screen once button is clicked, if this is what you were shooting to do?
My Problem is Click event is not firing from alert.html.
In index.html I have included output.html assigned to outputController, in output.html I have included alert.html by default alert.html will be hidden.
When I click on a button from output.html it will fire openWindow() method, inside it will call javascript alert method. (Where as we have overwritten the window.alert method to change the view of normal basic alert.) I can able to get the view in alert dialogue and even I can able to access the $scope member variable in alert.html but my problem is I can not fire click event. anyone suggest me what could be the problem with my code.
OutputController.js
App.controller('OutputController',[ '$scope',function($scope){
$scope.testVal = "Ajith";
$scope.checkClick = function () {
console.log("Clicked");
};
$scope.openWindow = function (title) {
alert(angular.element(document.querySelector("#HtmlA"))).html(), title);
};
}]);
index.html
<div class="tabpage" id="tabpage_4" ng-controller="OutputController">
<div class="outputTab" ng-include src="'views/output.html'"></div>
</div>
output.html
<input type="button" ng-click="openWindow('A')" value="OenAlert"/>
<div id="HtmlA" ng-controller="OutputController" ng-init="Type = 'A'"
ng-include="'views/alert.html'" ng-hide="true"></div>
alert.html
{{testVal}}
<input type="button" ng-click="checkClick()" value="Click Here"/>
As per above suggestions I have removed my custom alert, I have used angular-ui modal popup. It was working fine.
http://plnkr.co/edit/FEtJo3?p=preview
How can we trigger the button click event using AngularJs and show an alert message box? I have tried the alert("message") messagebox but it doesn't work.
You can use ng-click on button something like this:
Controller :
var VLogin = angular.module('myApp',[]);
VLogin.controller('TestCtrl', ['$scope',function($scope) {
$scope.clicked = function(){
alert("Clicked");
}
}]);
And in your HTML like :
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<button ng-click="clicked()">Click me!</button>
</div>
</div>
Here is the working Fiddle :- http://jsfiddle.net/nuejh9h6/
Thanks
we need to see what you have wrote but in general this is how ng-click works https://docs.angularjs.org/api/ng/directive/ngClick and you can write your alert code inside or in a new method and call it.
Hello currently I have a html form like that:
<div ng-controller="DemoCtrl">
<form name="myForm" action="/a/url">
....
</form>
<button ng-click="next(myForm)">Klick me</button>
</div>
is there a way to access the form action ?
what i suggest you not to provide action name in the form, instead of that within ng-click action javascript method in JS file either use $http service or $window service.
This can happen with the following htmlcode:
<div ng-controller="DemoCtrl">
<button ng-click="next(myForm)">Klick me</button>
</div>
JS Code:
$scope.next = function (formObject) {
// whatever you want to do
}
$scope will pick all the object defined within form tag.
I am also new in ng, if anything wrong here please correct me.
I have something like this:
http://plnkr.co/edit/CoDdWWQz8jPPM4q1mhC5?p=preview
What I would like to do is closing the popover window after clicking somewhere outside. I know that there were similar questions but I would like to know how to do that in Angular. Problem is, my popover is located inside script tag.
<script type="text/ng-template" id="templateId.html">
This is the content of the template {{name}}
</script>
In bootstrap's documentation they have an example of a 'dismissable' popover.
The trick is to add trigger: 'focus' to your popover options. You then need to change your element to a 'focusable' element (in this example i have used a button)
Here is my fork of your example.
PS. it is worth mentioning that not all elements are natively 'focusable'. You can make sure that an element can become focusable, but adding the attribute tabindex (eg. tabindex="-1").
Looks like I have found an answer to my question. All we need to do is to apply this solution: How to dismiss a Twitter Bootstrap popover by clicking outside? to directive responsible for showing popover. What's more, we need to add data-toggle="popover" to our button.
And, surprisingly, it works very well.
If you want it to work seamlessly on any kind of elements without having to use any external code nor weird things, all you have to do is add this 2 attributes to your markup: tabindex="0" to make the element focusable, and popover-trigger="focus" to make it dismiss the popup once you click off.
Example with <i> tag which is not focusable:
<i popover-html="someModelWhichContainsMarkup" popover-trigger="focus"
tabindex="0" class="fa fa-question-circle"></i>
You can use following code:
<div ng-app="Module">
<div ng-controller="formController">
<button uib-popover-template="dynamicPopover.templateUrl" popover-trigger="focus" popover-placement="left" type="button" class="btn btn-default">Popover With Template</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>
<span>prasad!!</span>
</div>
</script>
</div>
</div>
In Script :
<script type="text/javascript">
var app = angular.module("Module", ['ui.bootstrap']);
app.controller("formController", ['$scope', function ($scope) {
$scope.dynamicPopover = {
templateUrl: 'myPopoverTemplate.html'
};
}]);
</script>
Works for me, add this attribute to the tag which is calling/opening the popup, DON'T MISS THE SINGLE QUOTES AROUND outsideClick
popover-trigger="'outsideClick'"
This opens only one popover and closes upon clicking outside of popover
popover-trigger="outsideClick"