I've got a directive with this markup:
<button type="button" ng-class="{ 'btn-disabled': button.isDisabled }">
As you can see, btn-disabled is added as a CSS class if the scope's button.isDisabled is truthy.
Also on the scope is a property button.glyphicon. If glyphicon is truthy, I'd like to add the value of it to the <button>'s class as well.
How can I do this?
Maybe not the nicest syntax, but you could use:
data-ng-class="[button.isDisabled ? 'btn-disabled' : '', button.glyphicon]"
You could add a function to ng-class.
<button type="button" ng-class="getClass()">...
and on the controller
$scope.getClass = function(){
return ($scope.button.isDisabled ? "btn-disabled " : " ") + ($scope.button.glyphicon || "");
}
By adding this as a function you could reduce one extra watch that will be created while doing it inline in the template and abstract the logic out of html.
Related
I have this object in my component ts file that looks like this:
someData = {
someValue: null,
unit: "centimeters"
},
In my template (html file) I have to verify the value of "someValue" property. If its value is null then display the unit, else display the value of someValue and unit together. I have the below code but it doesn't seem to work. Can anyone point me in the right direction? Thanks in advance!
<div>{{ someData?.someValue === null ? someData?.someValue.unit : someData?.someValue someData?.unit }}</div >
You can use ngif to check the condition and show the data:
<div *ngIf="someData?.someValue === null">{{someData.unit}}</div>
<div *ngIf="someData?.someValue!= null">{{someData.someValue}} {{someData.unit}}</div>
Your two values at the end aren't going to render right, because it's executable javascript, not HTML when inside the double brackets.
I would suggest splitting this into two lines of HTML.
<div *ngIf="someData?.someValue; else unit_only">{{someData.someValue}} {{someData.unit}}</div>
<ng-template #unit_only>{{someData?.unit}}</ng-template>
Or you could try sticking with your original approach...
<div>{{ someData?.someValue === null ? someData?.unit : someData?.someValue + ' ' + someData?.unit }}</div>
I have a buttons array in my model, and an 'ng-if' in the template for each button:
self.aButtons.push({
label: __('Siguiente'),
class: 'btn-moduloAvance',
show: (self.oContrato.definirPago || self.oContrato.horario_definido)
}
});
That's the Html:
<button ng-if="boton.show"
ng-repeat="boton in personaAndContrato.aButtons"
type="button"
ng-class="boton.class"
/>
I know that i'm assigning a boolean to the 'show' property, so it's impossible it changes because it's a simple type.
By the way I'm trying to assign a function to the 'show' property but i'm getting the following error:
self.aButtons.push({
label: __('Siguiente'),
class: 'btn-moduloAvance',
show: function () {
return (self.oContrato.definirPago || self.oContrato.horario_definido);
}
});
Html (edited):
<button ng-if="boton.show()"
ng-repeat="boton in personaAndContrato.aButtons"
type="button"
ng-class="boton.class"
/>
TypeError: v2.show is not a function
at fn (eval at compile (angular.js?version=alpha.1:14539), :4:240)
Some ideas? Does i'm missing or missunderstanding something?
Thanks in advance!
You can't have ng-repeat and ng-if in the same tag if ng-if refer to the inner variable of ng-repeat.
Just split it :
<div ng-repeat="boton in personaAndContrato.aButtons">
<button ng-if="boton.show()"
type="button"
ng-class="boton.class"
/>
</div>
Changing to ng-if="boton.show()" will do.
I would like to change the color of the specific glyphicon clicked in my Angular app.
For example when this is clicked:
(in ng-repeat block) <span class="glyphicon glyphicon-thumbs-down" ng-click="downvote(post)" ></span>
When clicked it calls:
$scope.downvote = function(post) {
posts.downvote(post);
}
};
Thank you.
You can set a property on the post:
$scope.downvote = function(post) {
posts.downvote(post);
post.hadDownvote = true;
};
Then check the property in an ng-style attribute:
<span ng-style="post.hadDownvote ? {color:'red'} : {}" class="glyphicon glyphicon-thumbs-down" ng-click="downvote(post)"></span>
Naturally, for release you may prefer to use a CSS class defined elsewhere and perform the same check with ng-class to add the class.
you have to drive it via binding so in ur controller do this but make sure u assing default isDownVote to true or false
$scope.downvote = function(post) {
posts.downvote(post);
post.isDownVoted = !post.isDownVoted;
};
then in ur html do this
<span class="glyphicon glyphicon-thumbs-down" ng-click="downvote(post)" ng-class="post.isDownVoted===true ? 'some-color' : ''" ></span>
some-color is ur class where you can put ur css.
I hope someone can help me out.
I am using angular v1.3.14 and I try to add a scope variable in a key of a ng-class map.
example
<b class="fixedClass" ng-class="{'classOne' : x === 'foo',
'classTwo-%(y)%' : x === 'bar'}">
%(z)%
</b>
is there any way to do something like this or is there a way around ?
You can do something like this
angular.module('App',[])
.controller('AppController',['$scope',function($scope){
$scope.y = 10;
$scope.val = 'bar';
var fixedClass = "fixedClass ";
$scope.getCSSClass = function(){
if($scope.val === 'foo'){
return fixedClass + 'classOne';
} else {
return fixedClass + 'classTwo-(' +$scope.y+ ')';
}
};
}])
In Html
<body ng-controller="AppController">
<b ng-class="getCSSClass()">hello</b>
</body>
Here is the working code
Looking at your requirement, it appears you are mixing static class names with dynamic class names. Preferred approach would be
ng-class="['fixedClass',' fixedClass2',getDynamicStyle()]"
getDynamicStyle is exposed in scope to return the value of dynamic class name. You may add any number of dynamic styles.
I am trying to toggle the class of an element using ng-class
<button class="btn">
<i ng-class="{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}"></i>
</button>
isAutoScroll():
$scope.isAutoScroll = function()
{
$scope.autoScroll = ($scope.autoScroll) ? false : true;
return $scope.autoScroll;
}
Basically, if $scope.autoScroll is true, I want ng-class to be icon-autoscroll and if its false, I want it to be icon-autoscroll-disabled
What I have now isn't working and is producing this error in the console
Error: Lexer Error: Unexpected next character at columns 18-18 [?] in expression [{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}].
How do I correctly do this?
EDIT
solution 1: (outdated)
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
</button>
EDIT 2
solution 2:
I wanted to update the solution as Solution 3, provided by Stewie, should be the one used. It is the most standard when it comes to ternary operator (and to me easiest to read). The solution would be
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
</button>
translates to:
if (autoScroll == true) ? //use class 'icon-autoscroll' : //else use 'icon-autoscroll-disabled'
How to use conditional in ng-class:
Solution 1:
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
Solution 2:
<i ng-class="{true: 'icon-autoscroll', false: 'icon-autoscroll-disabled'}[autoScroll]"></i>
Solution 3 (angular v.1.1.4+ introduced support for ternary operator):
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
Plunker
As alternate solution, based on javascript logic operator '&&' which returns the last evaluation, you can also do this like so:
<i ng-class="autoScroll && 'icon-autoscroll' || !autoScroll && 'icon-autoscroll-disabled'"></i>
It's only slightly shorter syntax, but for me easier to read.
Add more than one class based on the condition:
<div ng-click="AbrirPopUp(s)"
ng-class="{'class1 class2 class3':!isNew,
'class1 class4': isNew}">{{ isNew }}</div>
Apply: class1 + class2 + class3 when isNew=false,
Apply: class1+ class4 when isNew=true
<div data-ng-init="featureClass=false"
data-ng-click="featureClass=!featureClass"
data-ng-class="{'active': featureClass}">
Click me to toggle my class!
</div>
Analogous to jQuery's toggleClass method, this is a way to toggle the active class on/off when the element is clicked.
autoscroll will be defined and modified in the controller:
<span ng-class= "autoscroll?'class_if_true':'class_if_false'"></span>
Add multiple classes based on condition by:
<span ng-class= "autoscroll?'first second third':'classes_if_false'"></span>
I made this work in this way:
<button class="btn" ng-click='toggleClass($event)'>button one</button>
<button class="btn" ng-click='toggleClass($event)'>button two</button>
in your controller:
$scope.toggleClass = function (event) {
$(event.target).toggleClass('active');
}