Question

我在html中呈现一个列表，我必须根据属性显示更大的字体大小。例如 -

    <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

如何解决这个问题？

Answer 1

您可以使用名称和人口添加类名 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';
}

然后根据这些类名

在css中创建适当的样式

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

Answer 2

您可以有条件地添加课程：

<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>

然后你应该在你的css文件中声明css类：

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

希望有所帮助！：d

Answer 3

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.items = [                    
                    {name : "smallerfont", population: 2000 },
                    {name : "mediumfont", population: 1500 },
                    {name : "biggerfont", population: 1000 }
                   ];
});

＆＃13;

.biggerfont{
 font-size:50px !important;
  color: red;
}

 .smallerfont{
 font-size:10px !important;
  color: blue;
}

 .mediumfont{
 font-size:25px !important;
  color: green;
}

＆＃13;

<!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>

＆＃13;

列表元素中的条件字体大小

3 个答案: