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>
Related
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'}"
I have list of roles in an array $scope.role = []; I need to show the selected role in chip form with first 3 characters . So I used substr(0,3) in $scope.multiRoles where I am pushing my selected roles.My problem is when I am deleting the role , I am checking out the index and pushing the data back to $scope.role where the substring is pushed but not the original one.For example Doc is pushed instead of Doctor
$scope.role.push("Doctor","Engineer","Lawyer","Designer");
Add Role :
$scope.AddRole = function(index){
if($scope.model.role !== undefined ){
$scope.multiRoles.push($scope.model.role.substr(0,3));
var index = $scope.role.indexOf($scope.model.role);
$scope.role.splice(index,1);
}}
Remove Role:
$scope.removeRoles = function(index,data){
if(($scope.multiRoles!== null ) && ($scope.multiRoles.length>1))
var index = $scope.multiRoles.indexOf(data);
$scope.multiRoles.splice(index,1);
$scope.role.push(data);
};
HTML:
<span class="file-tag-baloon1" alue ="data"
ng-repeat="role in filteredRoles track by $index" >
<span>{{role}}</span>
<a ng-click="removeRoles($index,role)"class="remove1">X</a>
</span>
The problem is that when you delete role from $scope.role you lose information about this role hence you can't recover it. As a solution you can store full names of roles in both arrays and use substring for representation only in your html like {{multiRole.substr(0, 3)}}, so you will have two arrays with data that can go both ways without any losses.
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))}
I am trying to hide or show my radio button using ng-if condition. Based on the formName return values.
<input type="radio" class="control-label" name="reportTypeRadios"
ng-value="reportType" ng-if="formName != 'DELETEREPORTTYPEENTITY' || formName != 'DELETEREPORTTYPESENTITY'"
ng-model="$parent.reportTypeRadio" ng-change="propertyRadioChanged(reportTypeRadio)">
{{reportType.reportTypeLabel}} </input>
But I am seeing the radio button in both forms. For some reason the ng-if condition does not work. Can someone suggest me what is wrong ?
formName != 'DELETEREPORTTYPEENTITY' || formName != 'DELETEREPORTTYPESENTITY'
This will always evaluate to true... Logically speaking:
If your formName is DELETEREPORTTYPEENTITY then your expression is going to be: (First part)false || (second part)true == true
If your formName is DELETEREPORTTYPESENTITY then your expression is going to be: true || false == true
If your formName is something else then your expression is going to be: true || true == true
I suspect that you wanted to write
formName == 'DELETEREPORTTYPEENTITY' || formName == 'DELETEREPORTTYPESENTITY'
so that you will only have the radio button showing up on those two forms that are named DELETEREPORTTYPESENTITY and DELETEREPORTTYPEENTITY, and nowhere else. Anyway, you should rework your condition to fit your needs.
The condition as in your code will always evaluate to true since formName can't be equal to both 'DELETEREPORTTYPEENTITY' and 'DELETEREPORTTYPESENTITY' at the same time.
Only way ng-if gets false is if both sides of || equate to false which can never happen.
I believe what you want to achieve here could be done by just one equality i.e.
ng-if="formName=='DELETEREPORTTYPEENTITY'"
The following conditional return false inside a angular view:
<a ng-class="(parseFloat('-0.56%') < 0) ? 'true' : 'false'">...</a>
I've already added the parseFloat method in $scope.
$scope.parseFloat = parseFloat;
Thanks for any help.
Take a look at this fiddle
You can use option 1 (as you have it) but you need to use class not ng-class
<a class="{{(parseFloat('-0.56%') < 0) ? 'true1' : 'false'}}">Option 1</a>
In order to use ng-class use this:
<a ng-class="{'true': (parseFloat('-0.56%') < 0), 'false': (parseFloat('-0.56%') >= 0)}">Option 2a</a>
<a ng-class="{'true': (parseFloat('0.56%') < 0), 'false': (parseFloat('0.56%') >= 0)}">Option 2b</a>
The difference being is that ng-class takes an object where the key is the class and the value is the boolean evaluation to determine if the class gets added to the element.