ngClass

假设你需要显示用户的状态,并且你可以使用几种可能的 CSS 类。Angular 使得从几个可能的类列表中进行选择非常容易,这些类允许你指定包含条件的对象列表。Angular 能够根据条件的真实性使用正确的类。

你的对象应包含键/值对。键是一个类名,当值(条件)计算为 true 时将应用该类名。

<style>
    .active { background-color: green; color: white; }
    .inactive { background-color: gray; color: white; }
    .adminUser { font-weight: bold; color: yellow; }
    .regularUser { color: white; }
</style>

<span ng-class="{ 
    active: user.active, 
    inactive: !user.active, 
    adminUser: user.level === 1, 
    regularUser: user.level === 2 
}">John Smith</span>

Angular 将检查 $scope.user 对象以查看 active 状态和 level 编号。根据这些变量中的值,Angular 会将匹配样式应用于 <span>