I have four buttons:
<button ng-disabled = "isDisabled1" ng-click="someFunc('isDisabled1')"></button>
<button ng-disabled = "isDisabled2" ng-click="someFunc('isDisabled2')"></button>
<button ng-disabled = "isDisabled3" ng-click="someFunc('isDisabled3')"></button>
<button ng-disabled = "isDisabled4" ng-click="someFunc('isDisabled4')"></button>
Now when click event fires on any one of the button it calls the someFunc() function and inside that function I want to disable the button that was clicked.
I am doing this inside the controller:
$scope.someFunc(toDisable){
$scope.toDisable = true;
}
But that does not work. Any idea how. I am new to AngularJS.
Use an map to store value
Ex : $scope.isDisabled={
isDisabled1:false,
isDisabled2:false,
.
.
.
}
and in
$scope.someFunc(toDisable){
$scope.isDisabled[toDisable]= true;
}
An alternative and simple way to do this is to use the ng-click directive to evaluate an expression that will manipulate the variable used in the ng-disabled directive.
e.g.
<button ng-disabled="ds1" ng-click="ds1 = true">btn1</button>
<button ng-disabled="ds2" ng-click="ds2 = true">btn2</button>
<button ng-disabled="ds3" ng-click="ds3 = true">btn3</button>
<button ng-disabled="ds4" ng-click="ds4 = true">btn4</button>
Associated plunker here.
Related
So I'm making a website, and I have some buttons that scroll to certain parts of a page. I have 5 buttons, and all of them have the exact same code except for their names. One of the buttons is broken and doesn't do anything, even though its code is the same as the working ones.
Here is my HTML:
About Us
<div class = "OurMethodsBar">
<button class = "OurMethodsButton" onclick = "ScrollTo(OurMethodsAnchor)">
Our Methods
</button>
</div>
<div class = "InvestBar">
<button class = "InvestButton" onclick = "ScrollTo(InvestAnchor)">
Invest
</button>
</div>
<div class = "ContactUsBar">
<button class = "ContactUsButton" onlclick = "ScrollTo(ContactUsAnchor)">
Contact Us
</button>
</div>
<div class = "MoreInformationBar">
<button class = "MoreInformationButton" onclick = "ScrollTo(MoreInfoAnchor)">
More Info
</button>
</div>
Here is my JS:
var AboutUsAnchor = document.getElementById("AboutUsAnchor");
var OurMethodsAnchor = document.getElementById("OurMethodsAnchor");
var InvestAnchor = document.getElementById("InvestAnchor");
var ContactUsAnchor = document.getElementById("ContactUsAnchor");
var MoreInfoAnchor = document.getElementById("MoreInfoAnchor");
function ScrollTo(Element) {
Element.scrollIntoView(true);
}
ScrollTo(AboutUsAnchor);
The broken button is the ContactUsButton which is supposed to scroll to the ContactUsAnchor.
If I manually use my ScrollTo function and input the ContactUsAnchor, it still works, but when I try to hit the button, it doesn't work.
I'd rather change approach and rewrite your function to get a string and get the element by ID later.
function ScrollTo(element) {
document.getElementById(element).scrollIntoView(true);
}
And then in your buttons just pass the string containing the ID in single quotes '
<button class = "ContactUsButton" onclick = "ScrollTo('ContactUsAnchor')">
Contact Us
</button>
And as others have pointed out, fix that onlclick :P
Okay so I am learning AngularJS, and one functionality is to allow the user to type HTML code into a textarea, this gets sent to the Controller and stored in a code variable. When the user presses the button to test the code, I want the text to be inserted into the HTML document. Currently all it does is add it as plain text, so not rendering it.
test-code.template.js:
<button type="button" class="btn btn-primary" ng-click="$ctrl.showCode()">Test Code</button>
<button type="button" class="btn btn-primary" ng-click="$ctrl.clearCode()">Reset All</button>
{{$ctrl.codeShow}}
test-code.component.js:
angular.
module('phonecatApp').
component('testCode', {
templateUrl: 'Components/test-code/test-code.template.html',
controller: [function TestCodeController() {
var self = this;
self.code = '';
self.codeShow = '';
self.showCode = function showCode()
{
self.codeShow = self.code;
}
self.clearCode = function clearCode()
{
self.codeShow = '';
self.code = '';
}
}]
});
Just to clarify, pressing the buttons do work and the data is successfully added from code to codeShow on the button press, and it can display it, but it is displayed as clear text instead of rendering. Thank you
Try
<div ng-bind-html="$ctrl.codeShow"></div>
also, do refer https://docs.angularjs.org/api/ngSanitize/service/$sanitize for better implementation
I have button "Cancel". On click on which I should show confirmation dialog to ask if user realy want to lost filled in data (in case he made some changes), and just hide form in case he didn't make changes.
I have variable canSave, which helps to detect if there are some changes on form.
cancel - method, which just clear all data and hide form.
This is what I've tried, but this didn't do anything.
<button data-bind="click: canSave ? function(){openConfirmation(!openConfirmation());} : cancel" type="reset" class="btn btn-default">Cancel</button>
Initial Code :
<button data-bind="toggleClick: openConfirmation" type="reset" class="btn btn-default">Cancel</button>
toggleClick is custom directive to change toggle some boolean variable.
<!-- ko if: canSave -->
<confirmation-modal class="delete-confirm-popup" params="showDialog : openConfirmation, bodyHtml: 'Your changes will not be saved.<br/> Do you want to continue?', confirmCallBack: cancel"></confirmation-modal>
<!-- /ko -->
I've showed confirmation in save there are some changes... But here I've missed case case when no changes and user click on Cancel button (in my case nothing happens).
So how can I combine 2 directives - click (for case with no changes) and toggleClick (for case when there are some changes) ?
Thanks.
You can simply have a single function on click event and then inside the function compare if there is a change that needs to be asked.
Here is a simple example : https://jsfiddle.net/kyr6w2x3/110/
HTML:
<form data-bind="visible:ShowForm">
<input type="text" data-bind="textInput:Input">
<input type="button" value="Cancel" data-bind="click:CancelForm">
</form>
<div data-bind="text:Status">
</div>
JS:
var MainViewModel = function() {
var self = this;
self.Input = ko.observable();
self.Status = ko.observable();
self.ShowForm = ko.observable(true);
self.canSave = ko.observable(false);
self.Input.subscribe(function(newValue){
if(newValue){
self.canSave(true);
}
})
self.CancelForm = function(){
if(self.canSave()){
self.Status("there is a change that needs to be asked the user");
}else{
self.ShowForm(false);
self.Status("there is no change so the form got hidden")
}
}
};
ko.applyBindings(new MainViewModel ());
Right now I have an input field:
<input type="number" ng-model="distance"></input>
In the JS I assign the distance to a value:
$scope.distance = 0;
I want this value to change when the user enters in a value and clicks a button. I have the button setup with my controller... But every time the button is clicked, it displays the value as 0.
Function when button is clicked:
//convert button function for when button is clicked
$scope.convert = function(myUnit, myUnit2, distance){
alert(distance);
}
The button:
<button class="button button-block button-balanced" ng-click="convert(myUnit.thisunit, myUnit2.thisunit2, {{distance}})">
Convert
</button>
Change ng-click to this ng-click="convert(myUnit.thisunit, myUnit2.thisunit2, distance)" because you were using {{distance}} interpolation directive inside ng-click directive that will never pass distance value
HTML
<button class="button button-block button-balanced" ng-click="convert(myUnit.thisunit, myUnit2.thisunit2, distance)">
Convert
</button>
Hope this could help you, Thanks.
Depending on the structure of your HTML, (if you have an ngIf above your <input>) the distance model may not be trickling up to your controller.
You should probably nest it for safety, like so:
$scope.formData = {distance: 0};
And then:
<input type="number" ng-model="formData.distance"></input>
Also, your click-handler should just read from the $scope value as well:
$scope.clickHandler = function() {
alert(formData.distance);
}
The Issue:
I've been unable to to accept a modal window with the ENTER key
I have modified the default Plunker to show you what I've done since now --> Here
What I have:
Briefly, the ENTER key is recognized by the modal, but it doesn't trigger my function (scope issues, I suspect).
The bad part is that I had to modifiy the template/modal/window, which I would gladly left unspoiled, if possible.
What I would love
I would love to simply put the ng-enter directive in my modal, without modifying the default template
Extra
I've also tried to add the "event 13" to the modal directive, but I couldn't pass any result in the modal.close, so I dropped that road
Any thought?
Check my Plunker. You should add ng-enter to "OK" button.
<button class="btn btn-primary" ng-enter="ok();" ng-click="ok()">OK</button>
Maybe you are looking for something more generic, I'm not sure. Then you might consider watchers. But personally I find this better since we don't have any constant watcher which listens modal event.
I have found that it is easiest just to add the enter event handler in the controller of the modal:
var text = "This is the text in the modal";
var modalPromise = $modal.open({
template:
'<div class="modal-body">' +
'<button class="close" ng-click="$dismiss(\'×\')">×</button>'+
'<h3 ng-bind="body"></h3>'+
'</div>'+
'<div class="modal-footer">'+
'<button class="btn btn-primary" ng-click="$close(\'ok\')">OK</button>'+
'<button class="btn btn-warning" ng-click="$dismiss(\'cancel\')">Cancel</button>'+
'</div>',
controller: function ($scope, $document) {
$scope.body = text;
var EVENT_TYPES = "keydown keypress"
function eventHandler(event) {
if (event.which === 13) {
$scope.$close('ok');
}
}
$document.bind(EVENT_TYPES, eventHandler);
$scope.$on('$destroy', function () {
$document.unbind(EVENT_TYPES, eventHandler);
})
}
}).result;
AngularJS support this be default.
Add a <form> tag in your template (modal.html) and add ng-submit directive
e.g.
<form name="questionForm" ng-submit="ok()">
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
// the rest of the code here
</form>