I want to pass this (the element) - a button to my controller by ng-disable.
here is my HTML:
<button type ="button" class = "btn btn-default" ng-click= "open()" ng-disabled = "checkRowId(this)">
</button>
And my controller :
$scope.checkRowId = function(btn){
console.log(btn); //undefined
}
The log shoes undefined, is there a way to pass a element like a button via ng-disabled?
There is no direct way to pass element via ng-disabled. You can create one directive say "disabled-ele" and put your element disabling logic there.
Example Code:
.directive('disabledEle', function() {
return {
restrict: 'EA',
link: function(scope, element, attrs) {
if(attrs.disabledEle.toLowerCase() === 'true') {
element.attr('disabled', 'disabled');
} else {
element.removeAttr('disabled');
}
}
}
});
<button type ="button" value="Click" class = "btn btn-default" disabled-ele="false">Click
</button>
Related
So,
I defined an array of button properties:
locationButtons: IButton[] = [
{
label: 'Customer-Hierarchy.LocationActions.SiteVisitButton',
disabled: true,
code: ButtonCode.SiteVisit,
redirectUrl: 'this.onSiteVisitClick()'
},
{
label: 'Customer-Hierarchy.LocationActions.ServiceInstallationButton',
disabled: true,
code: ButtonCode.ServiceInstallation,
redirectUrl: 'this.onServiceInstallClick()'
}
];
I want to call a function defined inside a redirect Url prop when the user clicks a button.
<div *ngFor="let item of locationButtons">
<button ngbDropdownItem [disabled]=item.disabled
(click)=item.redirectUrl>
{{item.label | translate}}
</button>
</div>
I tried with:
redirectUrl: this.onSiteVisitClick
.HTML
<button [disabled]=item.disabled (click)=item.redirectUrl()>
</button>
But when I want to call the function inside of item.redirectUrl() function I get this error: this.testFunction is not a function.
Code example:
onSiteVisitClick() {
this.testFunction();
}
testFunction() {
alert('Test');
}
You can assign the redirectUrl properties to the appropriate method:
locationButtons: IButton[] = [
{
...
redirectUrl: this.onSiteVisitClick
},
{
...
redirectUrl: this.onServiceInstallClick
}
];
An then bind the click event to the method call.
<div *ngFor="let item of locationButtons">
<button ngbDropdownItem [disabled]="item.disabled"
(click)="item.redirectUrl()">
{{item.label | translate}}
</button>
</div>
cheers
I am saving a value through a textfield and after the button click, I wanted to disable the button so the user can't press it again.
I am using React.js for the implementation of the app.
<button type="button" className="btn btn-info round btn-glow px-2 float-right">Confirm</button>
create a state like this
state = {
btnIsDisable: false
}
set in button
<button disabled={this.state.btnIsDisable} type="button" className="btn btn-info round btn-glow px-2 float-right">Confirm</button>
in onClick handler change the state
this.setState({btnIsDisable:true});
You have to create a class component and set the initial state button state to true and then change it to false when the click function is fired
// Initial state
this.state = {
buttonEnabled : true
};
// onClick function
onClick(event){
this.setState({buttonEnabled: false});
}
render() {
const { buttonEnabled } = this.state;
return (
<div>
<button onClick={this.onClick} disabled={buttonEnabled}>
Your content here
<button>
</div>
)
}
// declare some variable for holding your button's state
state = {
disabled: false
}
...
onConfirmButtonClick () => {
// set state.disabled as true
this.setState({ disabled: true })
}
render () {
return (
...
<button
disabled={this.state.disabled} // add disabled attribute to your button along with your state
type="button"
className="btn btn-info round btn-glow px-2 float-right"
>
Confirm
</button>
)
}
Working code in the link: https://codepen.io/stanlee94/pen/gNOLxb
class Button extends React.Component {
state = {
disabled: false,
pointerStyle: 'pointer'
}
handleClick = () => {
//Do your logic here
console.log('Record added');
this.setState({
disabled: true,
pointerStyle: 'no-drop'
});
}
render() {
return(
<button disabled={this.state.disabled} type="button" onClick={this.handleClick}
style={{ cursor: this.state.pointerStyle }}>Confirm</button>
);
}
}
It will add an invalid type of pointer after you click to provide a good user experience to your user.
When I click on this button,I want label to change. HTML:
<button pButton type="button" label="Edit" (click) = "foo()" style="width:auto"></button>
For example : before - "Edit", click, after - "Save".
You can simply bind it to your component variable inside your <button> tag.
<button pButton type="button" (click)="foo()"> style="width:auto">
{{myLabel}}
</button>
and in your component class:
#Component({
templateUrl:'./mytemplate'
})
export class MyComponent implements OnInit {
myLabel:string;
ngOnInit() {
this.myLabel = 'Edit';
}
foo() {
this.myLabel = 'Save';
}
}
Here is a working plunker: https://plnkr.co/edit/8TOn8oN63pgJ7eA7h7tY?p=preview
In your component class
#Component({
templateUrl:'./mytemplate'
})
export class MyComponent implements OnInit {
myLabel:string;
ngOnInit() {
this.myLabel = 'Edit';
}
foo() {
this.myLabel = 'Save';
}
}
In your html
<button pButton type="button" [attr.label]="myLabel" (click)="foo()" style="width:auto"></button>
Note that the html syntax has changed to start using property binding, where the "label" attribute of the node associated with the button element is being updated with the value of the myLabel variable in the component.
Read more about template and property bindings in this guide
https://angular.io/guide/template-syntax#property-binding
As a side note, if your requirement is to change the text displayed on the button, I would use interpolation as below
<button pButton type="button" (click)="foo()" style="width:auto">{{myLabel}}</button>
See this plunkr for a working example https://plnkr.co/edit/wEXKxP88kcsLKuBcUUxZ?p=preview
You can bind attributes via [attr.myAttribute] directive and as in your case you have to use [attr.label] to bind a value to the label attribute.
Inside your component you can define a label property which gets toggled on click:
class MyComponent {
private labelStates = ['Edit', 'Save'];
public label: string = this.labelStates[0];
public toggleLabel() {
let index = +(this.label === this.labelStates[0]);
this.label = this.labelStates[index];
}
}
And use it for your button:
<button [attr.label]="label" (click)="toggleLabel()"></button>
In case you want to change the button text use this:
<button (click)="toggleLabel()">{{ label }}</button>
I have a modal pop up.To open modal pop up i have a following code
mymodule.directive('modalDialogSite', function() {
return {
restrict: 'E',
scope: {
show: '='
},
replace: true,
transclude: true,
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
if (attrs.overflow)
scope.dialogStyle.overflow = attrs.overflow;
scope.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'><i class='fa fa-times-circle'></i></div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
};
});
In view page the code like below
<a data-toggle="modal" role="button" class="btn btn-success" ng-click="add_site()" data-backdrop="static"><i class="icon-bookmark"></i><b>Add Site</b></a>
<modal-dialog-site show='modalShown_site'>
<?php echo $this->load->view('sites/modal_sites/content/add_website');?>
</modal-dialog-site>
When i click this button it goes to add_site() function in my controller i have given code like below
mymodule.controller('myCtrl',function($scope){
$scope.modalShown_site = !$scope.modalShown_site;
$scope.add_sute = function()
{
$scope.modalShown_site = ! $scope.modalShown_site;
}
});
Actually i have load my form here
<modal-dialog-site show='modalShown_site'> <?php echo $this->load->view('sites/modal_sites/content/add_website');?> </modal-dialog-site>
and my form will be like
<form id='frmAddSite' name='frmAddSite' novalidate angular-validator angular-validator-submit="add_website(frmAddSite)" class="form-horizontal form-validate" method="POST">
<label for="textfield" class="control-label">Name</label>
<input name='site_name' ng-model="text.site_name" required required-message="'Site name is required'" type="text">
<input type="submit" class="btn btn-primary" value="Submit">
<button type="button" ng-click="frmAddSite.reset();add_site_cancel()" class="btn" data-dismiss="modal" aria-hidden="true">cancel</button>
</form>
In this scenario how can get the form name into directives?
In this sample, we create a directive to get the some attributes name,id of a element form
app.directive('myDirective', function () {
return {
transclude: true,
template: '<div class="something" ng-transclude></div>',
link: function(scope, element) {
var formName = element.find("form").attr("name");
var formId = element.find("form").attr("id");
console.log(formName);
console.log(formId);
}
}
});
Is it possible to access child elements within a button that has a specific class? There will be multiple buttons created. When a submit button is clicked, I want to iterate through the list of 'btnSelection' buttons created and if a 'btnSelection' button has the 'active' class, I want to push the span data into an array.
I imagine I'd need the parameters put into an object that itself will be a parameter going into the submit method on ng-click, but I'm not sure exactly how to write the Angular portion. Searching Google doesn't yield any specific examples. I'd appreciate any help.
Example HTML:
<div ng-repeat="item in items">
<button id="btnSelection" class="active">
<span>{{item.value}}</span>
</button>
</div>
<button ng-click="submit()">Submit</button>
You shouldn't use an active class in you're controller, it's not the angular way. Instead use an active attribute in your items objects and set your active class afterward.
Here is a jsFiddle:
http://jsfiddle.net/L5z3j0gj/2/
HTML:
<div ng-app='myApp' ng-controller='myController'>
<div ng-repeat="item in items">
<button type='button'
ng-click='addContent($index)'
ng-class="{active: item.active}"
ng-disabled='!item.active'>
<span>{{item.value}}</span>
</button>
</div>
<button type='button' ng-click='addContents(items)'>Submit</button>
{{contentsArray}}
</div>
Controller:
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.items = [
{ value: 'value1', active: true },
{ value: 'value2', active: false },
{ value: 'value3', active: true }
];
$scope.contentArray = [];
$scope.addContent = function(index) {
console.log($scope.items[index]);
$scope.contentArray.push($scope.items[index].value);
};
$scope.addContents = function(items) {
$scope.contentsArray = [];
for (var idx in items) {
var item = items[idx];
if (item.active) {
$scope.contentsArray.push(item.value);
}
}
};
});
CSS:
.active {
background: green;
}
Demo: http://jsfiddle.net/bjbrc5wy/3/
<div ng-controller="ItemCtrl">
<ul>
<li ng-repeat="item in items">
<button ng-click="toggleActive(item)" class="active-{{item.active}}">
{{item.val}}
</button>
</li>
</ul>
<br>
<button ng-click="submit()">Submit</button>
</div>
You need to use a controller which acts as a parent object, a container for children. Then when you press your submit button from within this controller, you can access other items from the same controller $scope. You can see I also tie my data to the CSS with class="active-{{btn.active}}", so it automatically updates according to its active status. The controller is defined like so:
function ItemCtrl($scope) {
$scope.items = [ // sample data
{val:1, active:true},
{val:2, active:false}];
$scope.submit = function() {
var arr = [];
angular.forEach($scope.items, function(item) {
if(item.active) arr.push(item.val);
});
alert(arr); // here's the array of item values
};
}