I want to do something like this
ng-class="'notification-{{notification.severity}}' : notification.severity"
and have the result be <div class="notification-warn"></div> when the notification.severity is "warn"
currently I get <div class="notification-"></div>
EDIT: this is an example of what I want to do
https://jsfiddle.net/flashjammin/tgt3tok2/
Try this
<div ng-if="notification.severity" ng-class="'notification-{{notification.severity}}' : notification.severity == 'warn'"></div>
You can try the ternary operator to toggle between class.
Set the value of 'showNotification' in controller.
Set the values of notification.severity as whole
i.e. notification.severity = "notification-warn";
Controller:
if(notification.severity != '' || notification.severity != null){
$scope.showNotification = true;
}
else{
$scope.showNotification = false;
}
HTML:
<div ng-class="showNotification? 'notification' : notification.severity">
Related
if (url.indexOf('master/confirm-account') > 0) {
$scope.accountInfo = 'Confirm Account';
$scope.page = 'confirm_account';
$scope.activeTab = true;
} else if (url.indexOf('master/master-profile') > 0) {
$scope.accountInfo = 'Confirm Account';
$scope.page = 'master_profile';
$scope.activeTab = true;
} else {
$scope.accountInfo = 'Create Account';
}
<div ng-class = "{'process-step' : true, '({{page}}=='confirm_account') ? 'active-tab' : ' '}" >
How can I add process-step and active-tab class
Expected result if condition match then it become like that
The ng-class works like
{'add_this_class' : (if_this_expression_is_true)}
and not in the other way.
try this
<div class="process-step" ng-class="{'active-tab' : (page =='confirm_account') }">
Seeing to the complexity of your class matching logic you could go for second way of implementing ng-class
** Inside HTML**
<div class="process-step" ng-class="ctrl.getPageBasedClass()">
Inside Controller
var self.getPageBasedClass = function(){
var yourClassNameAsString = // your logic for class name
return yourClassNameAsString;
}
I have the following code in my controller:
$scope.checkSchedule = function (value) {
var result = false;
angular.forEach($scope.shifts, function (obj) {
if (obj['PublishedEmployee.Id'] === value && result === false) {
result = true;
}
});
return result;
};
My $scope.shifts is an array of objects. Each object contains another object, PublishedEmployee and that object has a property of Id.
My goal is to iterate over the $scope.shifts objects and if the PublishedEmployee.Id property == $scope.currentId then resolve the function to be true.
In my HTML I have the following:
ng-show="checkSchedule(currentId)"
So, if the function resolves to true, the element will display. However, I'm always receiving false, what am I missing to have this resolve accordingly?
Pictures:
Your problem is that you are checking for the literal property "PublishedEmployee.Id" and not the sub property "Id" of "PublishedEmployee".
Change
if (obj['PublishedEmployee.Id'] === value && result === false)
to
if (!result && obj.PublishedEmployee && obj.PublishedEmployee.Id === value)
This will check for the existence of a PublishedEmployee property before attempting to compare its Id property.
If you're just wanting to check if any of the $scope.shifts match, you can use Array.prototype.some.
return $scope.shifts.some(function(obj) {
return obj.PublishedEmployee && obj.PublishedEmployee.Id === value;
});
In theory this will work if your data is as you say...
<div ng-repeat="item in shifts">
<div ng-show="item.PublishedEmployee.Id == currentId">
Matched
</div>
</div>
I need to call function on ng-click but only if $scope.currentActiveMenu = 1;.
How can i do that?
ng-click="GetAllTickets(0,25) = currnetActiveMenu==1">
or something like that?
Don't put any Condition Expression in Template, do it in the Controller.
ng-click="checkCurrentActiveMenu(currentActiveMenu)">
Controller :
$scope.checkCurrentActiveMenu = function(value) {
if (value == 1) {
GetAllTickets(0,25);
}
}
If you really need this in the template, you can use this (if the first condition isn't true, the second one will not be called):
ng-click="currentActiveMenu==1 && GetAllTickets(0,25)">
Like this:
ng-click="currnetActiveMenu === 1 && GetAllTickets(0,25)"
Create a function in your controller:
ng-click="GetAllTicketsForMenu(0,25, currnetActiveMenu)">
in your controller:
$scope.GetAllTicketsForMenu = function(val1,val2, currnetActiveMenu){
if(currnetActiveMenu === 1){
$scope.GetAllTickets(val1,val2);
}
};
You could also try a ternary:
ng-click="currnetActiveMenu==1 ? GetAllTickets(0,25) : null ">
Consider the following code:
<div ng-controller="SomeCtrl">
<div ng-show="someVariable.someProperty">Value of someProperty is set</div>
</div>
Now, when I set in my SomeCtrl controller:
$scope.someVariable.someProperty = 1;
It will show the div, as expected. But when I set:
$scope.someVariable.someProperty = 0;
It does not, while I only want to hide it in case $scope.someVariable.someProperty is either undefined or null. Of course I could write a simple Javascript helper-function to give me the expected result, or write something like:
<div ng-show="someVariable.someProperty || someVariable.someProperty == 0">Value of someProperty is set</div>
But isn't there a more elegant way to
handle this in AngularJS?
I only want to hide it in case $scope.someVariable.someProperty is either undefined or null
In JavaScript, undefined == null, but neither == 0. No need for extra functions or an extra conditional
ng-show="someVariable.someProperty != null"
Change your logic to be something more like this then:
ng-show="someVariable.someProperty !== null && someVariable.someProperty >= 0">
That way null or undefined will be falsy.
I almost forgot that null >= 0 === true (silly Javascript :)
Put a function in the controller like this:
$scope.shouldShow = function() {
if($scope.someVariable.someProperty === null ||
$scope.someVariable.someProperty === "undefined") {
return false;
}
return true;
}
and in the html:
<div ng-show="shouldShow()">Value of someProperty is set</div>
As mentioned by #tymeJV, "0" is evaluated as false in JS, so ng-show="0" will evaluate to hiding the div.
In SomeCtrl, you could write a function which encapsulates the logic to determine whether someProperty is null or undefined and return true or false based on that evaluation.
angular.module("app")
.controller("SomeCtrl", function($scope) {
$scope.someVariable = {};
$scope.someVariable.someProperty = null;
$scope.isNullorUndefined = function(value) {
return value === null || angular.isUndefined(value);
};
});
<div ng-show="!isNullOrUndefined(someVariable.someProperty)">Value of someProperty is set</div>
With AngularJS I'm using ng-class the following way:
<div class="bigIcon" data-ng-click="PickUp()"
ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>
I'm wondering if I can use the if-else expression to do something similar to this:
<div class="bigIcon" data-ng-click="PickUp()"
ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>
So whenever call.State differs from first or second use classC and avoid specifying each value?
Use nested inline if-then statements (Ternary Operators)
<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">
for example :
<div ng-class="apt.name.length >= 15 ? 'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">
...
</div>
And make sure it's readable by your colleagues :)
you could try by using a function like that :
<div ng-class='whatClassIsIt(call.State)'>
Then put your logic in the function itself :
$scope.whatClassIsIt= function(someValue){
if(someValue=="first")
return "ClassA"
else if(someValue=="second")
return "ClassB";
else
return "ClassC";
}
I made a fiddle with an example : http://jsfiddle.net/DotDotDot/nMk6M/
I had a situation where I needed two 'if' statements that could both go true and an 'else' or default if neither were true, not sure if this is an improvement on Jossef's answer but it seemed cleaner to me:
ng-class="{'class-one' : value.one , 'class-two' : value.two}" class="else-class"
Where value.one and value.two are true, they take precedent over the .else-class
Clearly! We can make a function to return a CSS class name with following fully example.
CSS
<style>
.Red {
color: Red;
}
.Yellow {
color: Yellow;
}
.Blue {
color: Blue;
}
.Green {
color: Green;
}
.Gray {
color: Gray;
}
.b{
font-weight: bold;
}
</style>
JS
<script>
angular.module('myapp', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
$scope.getClass = function (strValue) {
if (strValue == ("It is Red"))
return "Red";
else if (strValue == ("It is Yellow"))
return "Yellow";
else if (strValue == ("It is Blue"))
return "Blue";
else if (strValue == ("It is Green"))
return "Green";
else if (strValue == ("It is Gray"))
return "Gray";
}
}]);
</script>
And then
<body ng-app="myapp" ng-controller="ExampleController">
<h2>AngularJS ng-class if example</h2>
<ul >
<li ng-repeat="icolor in MyColors" >
<p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
</li>
</ul>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
<li ng-repeat="icolor in MyColors">
<p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
</li>
</ul>
You can refer to full code page at ng-class if example
The above solutions didn't work for me for classes with background images somehow. What I did was I create a default class (the one you need in else) and set class='defaultClass' and then the ng-class="{class1:abc,class2:xyz}"
<span class="booking_warning" ng-class="{ process_success: booking.bookingStatus == 'BOOKING_COMPLETED' || booking.bookingStatus == 'BOOKING_PROCESSED', booking_info: booking.bookingStatus == 'INSTANT_BOOKING_REQUEST_RECEIVED' || booking.bookingStatus == 'BOOKING_PENDING'}"> <strong>{{booking.bookingStatus}}</strong> </span>
P.S: The classes that are in condition should override the default class i.e marked as !important
This is the best and reliable way to do this.
Here is a simple example and after that you can develop your custom logic:
//In .ts
public showUploadButton:boolean = false;
if(some logic)
{
//your logic
showUploadButton = true;
}
//In template
<button [class]="showUploadButton ? 'btn btn-default': 'btn btn-info'">Upload</button>
A workaround of mine is to manipulate a model variable just for the ng-class toggling:
For example, I want to toggle class according to the state of my list:
1) Whenever my list is empty, I update my model:
$scope.extract = function(removeItemId) {
$scope.list= jQuery.grep($scope.list, function(item){return item.id != removeItemId});
if (!$scope.list.length) {
$scope.liststate = "empty";
}
}
2) Whenever my list is not empty, I set another state
$scope.extract = function(item) {
$scope.list.push(item);
$scope.liststate = "notempty";
}
3) When my list is not ever touched, I want to give another class (this is where the page is initiated):
$scope.liststate = "init";
3) I use this additional model on my ng-class:
ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-init': liststate = 'init'}"
Use it this way:
<div [ngClass]="{cssClass A: condition 1, cssClass B: condition 2, cssClass C: condition 3}">...</div>
You can try this method:
</p><br /><br />
<p>ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}<br /><br /><br />
ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}
You can get complete details from here.