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

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