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