CODEWITHSUNDEEP
angularjshtmlcss
Pinki Singh
Pinki Singh

Reputation: 1

conditional font size in list element

I am rendering a list in html and i have to display bigger font size based on attributes. for example-

    <li ng-repeat="i in items | filter:searchString">
            <p>{{i.name}}</p>
            <p>population : {{i.population}}</p>
        </li>

     if name = state1 , population =1000 // bigger font
        name = state2 , population =2000 // smaller font then state1
        name = state3 , population = 1500 //  bigger font then state1 and 
        smaller then state2

how to acieve that?

Upvotes: 0

Views: 327

Answers (3)

skdonthi
skdonthi

Reputation: 1442

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.items = [                    
                    {name : "smallerfont", population: 2000 },
                    {name : "mediumfont", population: 1500 },
                    {name : "biggerfont", population: 1000 }
                   ];
});
.biggerfont{
 font-size:50px !important;
  color: red;
}

 .smallerfont{
 font-size:10px !important;
  color: blue;
}

 .mediumfont{
 font-size:25px !important;
  color: green;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<li ng-repeat="i in items | filter:searchString">
            <p>{{i.name}}</p>
            <p  ng-class="{ biggerfont: i.population === 1000, smallerfont: i.population === 2000, mediumfont: i.population ==1500}">population : {{i.population}}</p>
        </li>

     <!-- if name = state1 , population =1000 // bigger font
        name = state2 , population =2000 // smaller font then state1
        name = state3 , population = 1500 //  bigger font then state2 and 
        smaller then state1 -->



</div>

</body>
</html>

Upvotes: 0

Shailesh Rathod
Shailesh Rathod

Reputation: 157

you can add classname based on your name and population using class="{{$scope.getClassName(i.name, i.population)}}"

$scope.getClassName = function(name, population){
    if(name == 'state1' && population == 1000) return 'state1';
    if(name == 'state2' && population == 2000) return 'state2';
    if(name == 'state3' && population == 3000) return 'state3';
}

then just create appropriate styling in css based on those classnames

.state1{ font-size:20px; }
.state2{ font-size:16px; }
.state3{ font-size:12px; }

Upvotes: 1

Daniel Segura P&#233;rez
Daniel Segura P&#233;rez

Reputation: 1117

You can add class conditionally:

<li ng-repeat="i in items | filter:searchString">
            <p>{{i.name}}</p>
            <p [ngClass]="{'bigFont': i.population == 1000,
                           'midFont':  i.population == 2000, 
                           'smallerFont':  i.population == 1500}">
                  population : {{i.population}}
            </p>
</li>

Then you should declare the css class on your css file:

.bigFont{
   font-size:30px;
}
.smallerFont{
   font-size:12px;
}
.midFont{
   font-size:20px;
}

Hope to be helpful! :D

Upvotes: 0

Related Questions