I want to add a class to the i tag after clicking of button. how can I achieve this using angular js.
<button type="button" title="Like" ng-click="countLikes(product.title)" class="btn btn-compare">
<i class="fa fa-thumbs-o-up"></i>
</button>
$scope.countLikes = function (e) {
console.log(e);
}
I wanted output like this. Added exampleClass to the i tag
<button type="button" title="Like" ng-click="countLikes(product.title)" class="btn btn-compare">
<i class="fa fa-thumbs-o-up exampleClass"></i>
</button>
use ng-class directive
<i class="fa fa-thumbs-o-up" ng-class="{'exampleClass' : buttonClicked}"></i>
$scope.countLikes = function (e) {
$scope.buttonClicked = true;
console.log(e);
}
when buttonClicked is true i element will get the exampleClass css class
<button type="button" title="Like" ng-click="countLikes(product.title)" class="btn btn-compare">
<i class="fa fa-thumbs-o-up" ng-class="{'exampleClass': isClick}"></i>
</button>
$scope.isClick = false;
$scope.countLikes = function (e) {
$scope.isClick = true;
}
Here is my answer
<button type="button" title="Like" class="btn btn-compare" ng-click="(myLike = myLike === 'fa-thumbs-o-up' ? 'fa-thumbs-up' : 'fa-thumbs-o-up'); countLikes(product.title)";>
<i class="fa" ng-class="myLike"></i>
</button>
$scope.myLike = "fa-thumbs-o-up";
Related
This question already has answers here:
How to call a method defined in an AngularJS directive?
(13 answers)
Closed 4 years ago.
Someome, please tell me how can I access a javascript directive link function from a typedScript controller. I have a button outside the directive and I want to call that function in my pageController when my user button is clicked. I´ve tried several tutorials but i can´t have it working.
1-This is an extract of th directive.js file
I want to call the function from my controller
directive.js - javascript
(function () {
'use strict';
angular.module('pdf', []).directive('ngPdf', ['$window', function ($window) {
return {
restrict: 'E',
templateUrl: function (element, attr) {
return attr.templateUrl ? attr.templateUrl : 'app/_infrastructure/pdfViewer/viewer.html';
},
scope: {
pdfUrl: '='
},
link: function (scope, element, attrs) {
var url = scope.pdfUrl;
scope.goPrevious = function () {
if (scope.pageToDisplay <= 1) {
return;
}
scope.pageToDisplay = parseInt(scope.pageToDisplay) - 1;
scope.pageNum = scope.pageToDisplay;
};
}
};
}]);
})();
2-This is the directive template (.hmtl)
<nav class="text-center">
<div class="prev-next-button previous">
<button class="btn btn-danger btn-sm" ng-click="goPrevious()">
<i class="fa fa-arrow-left fa-lg"></i>
</button>
</div>
<div class="prev-next-button next">
<button class="btn btn-danger btn-sm" ng-click="goNext()">
<i class="fa fa-arrow-right fa-lg"></i>
</button>
</div>
<span>Pág: </span>
<input type="text" class="searchPageNumber" min="1" ng-model="pageNum">/
<span>{{pageCount}}</span>
<button class="btn btn-danger btn-sm" title="Diminuir" ng-click="zoomOut()">
<i class="fa fa-minus"></i>
</button>
<button class="btn btn-danger btn-sm" ng-click="fit()">
100%
</button>
<button class="btn btn-danger btn-sm" title="Aumentar" ng-click="zoomIn()">
<i class="fa fa-plus"></i>
</button>
</nav>
<hr style="border-top: 0px; margin-bottom: 0px!important;margin-top: 1px!important" />
<div style="max-height:900px;max-width:1051px;overflow: auto;">
<canvas id="pdf" style="border:2px solid #000000;"></canvas>
</div>
3- This the user page (.html)
<div class="main-content-inner" ng-controller="MyController as Ctrl">
<div class="col-xs-8" >
<div class="form-group" ng-show="(Ctrl.currentProcesso.estadoProcessoId==1 || Ctrl.currentProcesso.estadoProcessoId== 3 ||Ctrl.currentProcesso.estadoProcessoId==6) && Ctrl.appUserBasicInfo.role == 'Escrivão'">
<ng-pdf data-pdf-url="file.pdf" canvasid="pdf" scale="page-fit" page="1"></ng-pdf>
</div>
</div>
<div class="col-xs-3">
<button class="btn btn-success btn-sm btn-next"
ng-click="Ctrl.controllerMethodToCallDirectiveFunction()"
ng-show="true">
NEXT
<i class="tcicons-icon fa fa-arrow-right icon-on-right"></i>
</button>
</div>
</div>
4-Finally this is my controller (MyController.ts)
public enumerarProcessoPushPop = (): boolean => {
//I want to call the directive method here
return true;
}
Methods inside Angular directives are not meant to be called. From the Angularjs documentation:
At a high level, directives are markers on a DOM element (such as an attribute, element
name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.
I have a button that is being used to toggle a class on a div to open and close a side menu.
<div id="body-holder" [ngClass]="{'show-nav':isActive}">
<div class="site-wrap">
<button class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
</div>
</div>
In my component.ts file i have the following code.
isActive: boolean = true;
flipper()
{
this.isActive = !this.isActive;
}
however instead of toggling the class when I click the button the page gets reloaded instead and redirects me to my application homepage.
You have to add preventDefault to your click event in this way:
flipper(event: any)
{
event.preventDefault();
this.isActive = !this.isActive;
}
and in your html code:
<button class="toggle-nav" type="button" (click)="flipper($event)">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Set button type attribute to type="button":
<button type="button" class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Setting the button type to type="button" might also solve the problem
<button type="button"
It seems your button is inside a form and causes a submit.
Button inside division or form most of the times have default behavior of loading the page. For that reason, It's better to set type attribute of button as "buton".
<button type="button" class="toggle-nav" onclick="flipper()"> <i class="fa fa-bars" aria-hidden="true" ></i></button>
I think there is mistake in function. You missed to mention "funtion" keyword before you define the function. I tried a sample fiddle: here
<script>
isActive: boolean = true;
function flipper()
{
alert("a");
}
</script>
Am developing an application in angular js and using ui.router.
I would like to hide certain buttons based on a given state.
I have implementend the click event which navigates to the selected state, and i would like when a button has been clicked and is active to be hidden and reappear when the state is not active
I have tried
HTML FOR THE BUTTONS
<button type="button" ng-click="viewNew()" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>
On the controller
$scope.viewAssigned = function () {
$state.go("dash.call.assigned");
}
$scope.viewNew = function () {
$state.go("dash.call.new");
}
How can i alter my controller code to hide and show these buttons using ng-show
You'll need to add information about the state to the controller, through something like $scope.state = $state.current.name
From there, you can use that in an ng-show or ng-if.
You can do this,
<button type="checkbox" ng-click="viewAssigned()" ng-hide="$state.includes('dash.call.assigned')" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus"></i> Assigned calls
</button>
you should have added $state in $rootScope, for this to work.
Inject $state, $rootScope and place this in your app's run block.
$rootScope.$state = $state;
You can use a $scope variable to track the state change.look at the below code
$scope.viewAssigned = function () {
$scope.viewnew = true;
$state.go("dash.call.assigned");
}
$scope.viewNew = function () {
$scope.viewnew = false;
$state.go("dash.call.new");
}
And your HTML code should be like this,
<button type="button" ng-click="viewNew()" class="btn btn-sm btn-success" ng-hide="viewnew">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" class="btn btn-sm btn-success" ng-hide="!viewnew">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>
You can see when the $state is changing and hide that buttons. On your run() you can use a function similar to this:
myApp.run(function ($rootScope, $state) {
$rootScope.viewnew= false;
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
if (toState.name === 'myState') {//toState variable see the state you're going
$rootScope.viewnew = false;
} else {
$rootScope.viewnew = true;
}
});
});
then add this to your buttons:
<button type="button" ng-click="viewNew()" ng-hide="viewnew" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" ng-hide="!viewnew" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>
so when your $state change it would hide or show it.
Sup, I have problem with getting data-* value using jQuery.
My HTML code is:
<button type="button"
class="btn btn-danger"
id="{{ currency.id }}"
data-curname="{{ currency.name }}"
data-toggle="modal"
data-target="#deleteConfirm"
onclick="deleteCurConf(this.id)">
<span class="glyphicon glyphicon-remove"></span>
Delete
</button>
jQuery is:
function deleteCurConf(id) {
var curName = $('#' + id).data('curname');
console.log(curName);
}
But console log returns undefined. And the most interesting thing that this code was working yesterday but today it's broken.
Any idea?
Btw, I'm using Bootstrap3 and Twig
Two little changes needed:
1) just pass this instead of this.id while calling function:
<button type="button"
class="btn btn-danger"
id="{{ currency.id }}"
data-curname="{{ currency.name }}"
data-toggle="modal"
data-target="#deleteConfirm"
onclick="deleteCurConf(this)">
<span class="glyphicon glyphicon-remove"></span>
Delete
</button>
2) in function:
function deleteCurConf(id) {
var curName = $(id).data('curname'); // use $(id)
console.log(curName);
}
Cleaner way to do in jQuery would be:
<button type="button"
class="btn btn-danger handleClick" // Added extra class
id="{{ currency.id }}"
data-curname="{{ currency.name }}"
data-toggle="modal"
data-target="#deleteConfirm"
<span class="glyphicon glyphicon-remove"></span>
Delete
</button>
jQuery
$("document").on("click",".handleClick",function(evnt){
var curName = $(evnt.target).data('curname'); // use $(id)
console.log(curName);
})
I have a button:
<button ng-click="deleteCompany(company.id)"
class="btn btn-danger"
onClick="return window.confirm('This will permernently delete the entity\n
Are you sure you want to delete this post?'); ">
<span class="glyphicon glyphicon-trash"></span>
</button>
I also have an angular function:
$scope.deleteCompany = function(id){
console.log(id);
}
When i click cancel in the confirm the console outputs:
1
When i click ok in the confirm the console outputs:
1
I want the angular code to execute when the "Ok" is pressed but not when the "Cancel" is pressed.
JSFiddle example: http://jsfiddle.net/4304ewu5/
Throw your confirm inside the $scope.deleteCompany() function:
function MyCtrl($scope) {
$scope.deleteCompany = function(id) {
if (confirm('This will permernently delete the entity\nAre you sure you want to delete this post?')) {
$scope.name = id;
// delete the stuff.
}
}
}
And remove it from the inline HTML:
<div ng-controller="MyCtrl">
<button ng-click="deleteCompany('1')" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
<button ng-click="deleteCompany('2')" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
Hello, {{name}}!
</div>
Fiddle: http://jsfiddle.net/0Laztrfk/
Why don't you put the confirm within your deleteCompany method?
$scope.deleteCompany = function(id) {
if (!confirm("Delete company?"))
return;
console.log(id);
}