Add multiple condition in the ng-style - angularjs

I need to add multiple condition in the ng-style.
How can I do this?
I tried below code but it is not working.
ng-style="ifTrue?'opacity:1;' : 'ifTrue? 'opacity: 1;': 'opacity: 0.5;''"


You can simply separate your conditions with ",".
Something like this:
ng-style="{ 'background-color': '#ff0', color: 'red' }"
See this example: http://jsbin.com/fabisepede/edit?html,output
Always remember to put quotes on "dashed" word ('background-color').
For the value you can also use variables defined in your controller and assign the style conditionally, but for that i prefer ng-class.


This worked for me
ng-style="IfCondition1 ? checkAnotherCondition && {'color':'red'} : {'color': 'green','font-weight':'bolder'}"
It checks my first condition and if true then it checks another condition and if that is true it makes it red. If the first condition is false then the last style is applied.


You could use something like
ng-style="condition && { /*properties*/ } || condition2 && { /*other properties*/ }"


ng-style="ifTrue ? 'opacity:1;' : 'opacity: 0.5;'
ng-style=(condition) ? 'run this if true' : 'run this if false'
Why dont use something like this?


how to set for three condition
example:
if data is === 1 then red
if data is === 2 then blue
else pink


#mario - you can use something like
[ngStyle]="{'property-to-set': (if_1) ? (true_block_1) : ((if_2) ? (true_block_2) : (other_true))}

Related

my conditional returns undefined instead of true/false

I'm using angularjs and trying to set up a flag on the front end for my ng-if. I wanted to consolidate the logic in the controller but the the ng-if is only returning true and never false.
I need some efficient way for my code to return false if conditions are not met instead of returning undefined.
vm.showLocButton = !vm.isSupervisorReviewApp && vm.application.benefitPeriod.program.programType.id === vm.constants.programTypeId.directBill && vm.application.applicationStatus.code === vm.constants.applicationStatus.locIssued;

Dont know exactly but I see '=' instead of '==' are you assigninv the value or comparing if comparing than try using '=='
vm.showLocButton == !vm.isSupervisorReviewApp && vm.application.benefitPeriod.program.programType.id === vm.constants.programTypeId.directBill && vm.application.applicationStatus.code === vm.constants.applicationStatus.locIssued;
It will really helpful if you can post the entire code.

How to apply the style within angular expressions

I am having the below line of code which is having two values Absent and Present.If the value is Absent i want make it red colour and bold.I tried
by applying style but it is not working.please suggest me how to do it .
code:
<div class="flex-2 bold1">{{attendance.status == 'Absent' ? "style='color:red;font-weight:bold'" :" "}}</div>

There are two ways to do that:
<div class="flex-2 bold1" ng-style="attendance.status == 'Absent' && {'color':'red','font-weight':'bold'}"></div>
Other is by using class (Recommended)
.highlighted {
color:red;
font-weight:bold
}
ng-class="{'highlighted': attendance.status == 'Absent'}"

using class (Recommended):
Create the style in class and mention it in ng-class with conditional operator
ng-class="{attendance.status == 'Absent'?'test': 'test1'}"

Angularjs - `ng-hide` with expression

How can I do an ng-hide inline expression like this:
ng-hide="userType!=user"
?

what is your userType ?? a string ? and you want to hide if != 'user'
ng-hide="userType!='user'"
please check this answer about ng-hide/ng-show

The ngHide directive would not work on an inline expression. The inline expression is evaluated and then the result is injected in the HTML element containing the expression.
If the inline expression is just plain text, you could try the following:
{{ userType != user ? "" : value }}
or if you do not want an empty string you could also use "null"
{{ userType != user ? null : value }}

ng-class based on variable value

I have a variable with 4 possible values and i want to add a class for the first 3 variables and another for first 2 variables, also the requirement will some time change to one class for two possible value and another for other value
so if i give
<span ng-class="{'yes' : provisioned=='active',
'yes': provisioned=='cannot_delete_edit',
'no': provisioned=='cannot_delete_edit_upload',
'no': provisioned=='inactive'}" class="flag">
</span>
it is not working how can i solve this

You should have each class listed only once:
<span ng-class="{'yes': provisioned=='active' || provisioned == 'cannot_delete_edit', 'no': provisioned=='cannot_delete_edit_upload' || provisioned=='inactive', 'flag': true}"></span>

If your span has only two options, you can use this instead:
<span ng-class="(provisioned=='active' || provisioned == 'cannot_delete_edit') ?
'yes' : 'no'">...</span>
But this still leaves hard-coded values in the HTML. Instead, I would recommend leaving the data in the controller:
$scope.provisioned = (provisioned=='active' || provisioned == 'cannot_delete_edit');
and then using
<span ng-class="provisioned ? 'yes' : 'no'">...</span>

Cakephp - how check row is null?

I want to set flash message if there's not fullfilled row "surname" in database. How can I check if row surname is null ?
I tried to make something like this:
if(!isset(['User']['surname'])
or
if($user(['User']['surname']) === NULL
it obviously doesnt work

You can check it like.
<?php
if(!isset($user['User']['surname']) || empty($user['User']['surename'])){
// your code goes here
}

if(empty($user['User']['surname'])) {
// your code goes here
}

you can check like this
if(isset($user['surname']) || empty($user['surname'])){
$this->Session->setFlash('No Data.');
}

Resources