I am creating menu using angularJS. I need to add or remove class while click
my code shown below
<i class="fa fa-home {active === 'home' ? 'fa-spin': ''}" ></i> Home
I need to add and remove class (fa-spin) based on active value. But the above code was not working.
Following is the correct syntax:
<i class="fa fa-home" ng-class="{'fa-spin':active=='home'}"></i> Home
Suggestion
Better use UI-router instead of making menu manually. UI-router has directives like ui-sref-active which will automatically add active class to active menu and remove from rest of the menu items
Try this:
[ngClass]= "[active == 'home' ? 'fa-spin' : '']"
Use ngClass (See documentation: https://docs.angularjs.org/api/ng/directive/ngClass)
The general syntax for the ng-class directive is as follows:
ng-class="{'class1': condition, 'class2':condition, ...'classn':condition}"
Therefore, your code should look like:
<i class="fa fa-home" ng-class="{'fa-spin': active === 'home'}" ></i> Home
<i ng-class="{'fa-spin': active === 'home'}" class="fa fa-home"></i>
Related
I am trying to add aria-expanded to a link, I want the value of aria-expanded to be true when the user has expanded the link and false when it's not. I am not sure how to achieve this, i think a ternary operator would do but not sure how.
<a href="" ng-click="do()" class="" aria-expanded="{{}}" aria-label="test">
<span class=""></span>Something
</a>
You can simply bind the property to a variable
<a href="" ng-click="do()" class="" aria-expanded="{{expandedValue}}" aria-label="test">
<span class="">Something</span>
</a>
In your controller
$scope.do = function(){
$scope.expandedValue = !$scope.expandedValue;
}
I need to toggle between two svg's inserted with the ng-include directive.
Basically, I want to transform this:
<i class="indicator oppcicon {{domain.show_requests ? 'icon-chevron-down' : 'icon-chevron-right'}}"></i>
In something like this:
<i ng-include class="indicator" src="{{domain.show_requests ? 'images/chevron-down.svg' : 'images/chevron-right.svg'}}" ></i>
Is this possible?
I found the solution:
<i class="indicator" ng-include="domain.show_requests ? 'images/chevron-down.svg' : 'images/chevron-right.svg'" ></i>
I'm trying to make an angularjs app, I used the angularJS routing for the different views.
What I'm trying to do is have a variable that changes its value depending on the view I'm in, I tried to make a function :
$scope.set_variable = function(param){
$rootScope.variable = param;
}
then call the function with ng-click in HTML :
<div class="collection blue" ng-controller="AccueilCtrl">
<i class="material-icons mdi-action-home "></i> Accueil <span class="badge white lighten-2">Vous êtes ici</span>
<i class="material-icons mdi-action-supervisor-account "></i> Effectifs
<i class="material-icons mdi-action-today "></i> Absences
<i class="material-icons mdi-action-room "></i> Carto
</div>
but that wasn't a success, could you please help me do it ? or tell me why this isn't working ?
Thank you
In the controller of each view, inject $rootScope and then change the value of the variable using :
$rootScope.variable = value;
No need for different functions or ng-click because the controller is excecuted on its own when the view is called
I have following code:
<ul class="dropdown-menu">
<li ng-click="setValue('X')" ng-class="selected === 'X' ? 'active' : 'not-active'"><span>X <i class="fa fa-times" ng-click="unselect()"/></span></li>
<li ng-click="setValue('Y')" ng-class="selected === 'Y' ? 'active' : 'not-active'"><span>Y <i class="fa fa-times" ng-click="unselect()"/></span></li>
</ul>
I am switching classes if the value is selected. I would like to add an event on icon (which is only visible when its is selected), however, whenever I click on the icon, two ng-click's are triggered. My question is: how can I disable the ng-click on the parent element, when the row is selected?
You need to add $event.stopPropagation() to your inner ng-click:
<i class="fa fa-times" ng-click="unselect(); $event.stopPropagation();"/>
This will prevent the ng-click on the parent element from being called.
When you write and event in a DOM element, it's invocation bubbles up to call event attached to all it's parent till HTML tags.
You can prevent this occurrence by preventing the event to propagate further. stopPropagation does exactly that. You can find, details here https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
In your, unselect function, you can call like this
function unselect(event) {
event.stopPropagation();
// Your original code
}
I have the $scope object (array of objects) like this
$scope.parts = [];
(content of $scope.parts is changing during 'run-time', not just filled once per page load)
Later, it some custom directive i show those parts in such manner:
<li ng-repeat="part in parts">
<span>{{part.name}}
<i class="fa fa-check"
tooltip="some tooltip"
...
</i>
</span>
</li>
According to some logic, i want to change 'fa-' class and tooltip text.
I can do it like this
<i class="fa"
ng-class="haveDescr(part.name)"
//and in directive's controller
$scope.haveDescr = function (partName) {
return someCondition ? 'fa-check' : 'fa-question-circle';
};
and so on for the tooltip, and... for every attribute i want to change?
Is there a better way, than to write a scope "check-function" for every attribute? How can i trigger changes in every single part/property of $scope.parts and do the DOM changes described above? What is the right "angular way" for this? Or, maybe it is possible to 'intercept' ng-repeat action and do everything there?
You can use ng-class with an 'object' expression.
<i class="fa" ng-class="{'fa-check' : part.name, 'fa-question-circle' : !part.name}">
You can use ng-class and title
<i ng-class="{'fa-check':showFaCheck(part.name), 'fa-question': !showFaCheck(part.name) }" title="{{getTooltip(part.name)}}"/>
Fiddle http://jsfiddle.net/4PYZa/303/