Ng-style with condition
How can I apply style on some item in a list that satisfy listed condition:
-
Try this code,
<div data-ng-repeat="item in items">
<div data-ng-style="item.selected && {'background-color':'red'}">
{{item.name}}
<div>
<div>
讨论(0)
-
ng-style="{'background': (desktop) ? '#ffffff' : ''}"
Explanation:
{CssProperty: Condition ? if condition is True : If condition is False}
CssProperty : meaning background, color, font-size etc..
Condition: just like a If statment..
after the : define the property value for the true and false Condition .for the the CssProperty.
here we have no value if condition is false.
any true or false value should be the Proper value for the CSSProperty.
So for background it's #ffffff or White.
讨论(0)
-
Ironically I just looked this up, the correct thing is to obviously use classes as they have this designed within them.
However, you can do conditionals thanks to the JavaScript ability to return the last value with &&
<div ng-style="conditional && { 'background' : 'red' } || !conditional && { 'background' : 'green' }"> show me the background </div>
讨论(0)
-
On Angular >9 the syntax is following:
[ngStyle]="{'background-color': item.selected ? '#f00' : ''}"
Make sure you do not add a semicolon (;) at the end of the style expression as this breaks the functionality
讨论(0)
-
Please refer below
function simpleController($scope) {
$scope.items = [
{
selected: false,
name: 'first'
}
,
{
selected: true,
name: 'second'
}
];
}
.red
{
background:red}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app>
<body ng-controller="simpleController">
<div data-ng-repeat="item in items">
<div ng-class="{'red' : item.selected}"> {{item.name}}
<div>
<div>
</body>
</html>
讨论(0)
-
I think it would be best to use ng-class for your problem. You then make a new class for the red background, eg:
<style>
.red-background{
background-color: red;
}
</style>
And then use this class according to the condition:
<div data-ng-class="{'red-background':item.selected}">{{item.name}}</div>
(don't forget the single quotes around the class name, they are easily overlooked)
讨论(0)
加载中...
- 热议问题