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

我正在用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

{{i.name}

人口：{i.population}


如果name=state1，人口=1000//字体更大
name=state2，population=2000//字体比state1小
name=state3，population=1500//字体比state1大
比州小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>

---

希望能有所帮助！：D

您可以根据您的名称添加类名，并使用

class=“{{$scope.getClassName（i.name，i.population）}”

然后根据这些类名在css中创建适当的样式

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

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.items=[
{姓名：“smallerfont”，人口：2000}，
{姓名：“mediumfont”，人口：1500}，
{姓名：“biggerfont”，人口：1000}
];
});
.biggerfont{
字体大小：50px！重要；
颜色：红色；
}
斯莫勒丰先生{
字体大小：10px！重要；
颜色：蓝色；
}
.mediumfont{
字体大小：25px！重要；
颜色：绿色；
}


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

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