AngularJS中ng-class常⽤写法，三元表达式、评估表达式与对
象写法
前⾔：ng-class在angularjs样式开发中使⽤频率是特别⾼的，所以我⽤ng-class的三元运算符的写法来定义⼀个样式
ng-class
<-class使⽤变量
即ng-class的值是⼀个变量，当我们改变变量值时，得到的class名也会对应改变；例如下⾯的例⼦中⽂本样式的class名由select的值决定，选择不同选项得到不同的效果，例如：
<select name="" id="" ng-model="vm.style">
<option value="blue">蓝底⽩字</option>
<option value="red">红底⽩字</option>
</select>
<span ng-class="vm.style">听风是风</span>
如果我们有多个变量作为ng-class的值，可以通过数组的⽅式包裹住这些变量名，像这样：
<span ng-class="[vm.style,vm.size]">听风是风</span>
<-class评估表达式
这种⾮常⾮常常见，我们已经确定了ng-class的名字，但是⽤⼀个变量决定这个class是否⽣效，例如：
angular和angularjs
<input type="checkbox" ng-model="vm.status">
<span ng-class="{red: vm.status}">听风是风</span>
如果我们需要控制多个class名，请使⽤逗号进⾏分割
<span ng-class="{red: vm.status,blue: vm.value}">听风是风</span>
注意：class名有加引号和不加引号两种写法，博客中例⼦都没加引号，但推荐都加引号；原因是如果需要控制的class名为多个单词，不加引号以 - 拼接会报错，⼩驼峰命名不会，但如果加引号，使⽤ -
拼接可⼩驼峰都没问题。
正确写法：
<span ng-class="{redColor: vm.status}">听风是风</span>
<span ng-class="{'red-color': vm.status}">听风是风</span>
错误写法：
<span ng-class="{red-color: vm.status}">听风是风</span>
<-class三元表达式（三元运算符）
这种写法就更加常⽤了，我们控制⼀个变量的真假状态，为真使⽤样式A，为假使⽤样式B：
<input type="checkbox" ng-model="vm.status">
<span ng-class="vm.status ? 'red' : 'blue'">听风是风</span>
我们也可以使⽤评估表达式来模拟三元的效果：
<input type="checkbox" ng-model="vm.status">
<span ng-class="{red: vm.status,blue: !vm.status}">听风是风</span>
<-class对象写法
这种写法⼀般使⽤⽐较少见，同样是根据变量来决定启⽤不同的class，直接上代码：
<select name="" id="" ng-model="vm.status">
<option value="color-blue">蓝⾊</option>
<option value="color-red">红⾊</option>
</select>
<span ng-class="{color-blue:'blue',color-red:'red'}[vm.status]">听风是风</span>
当然我们也能使⽤对象写法模拟三元表达式的效果：
<input type="checkbox" ng-model="vm.status">
<span ng-class="{true:'blue',false:'red'}[vm.status]">听风是风</span>
感受到ng-class的灵活与强⼤了吗，⽇常开发中合理使⽤ng-class能让你的样式表达⾮常便捷，⽐如我在⽤户登录注册功能块，就使⽤ng-class实现了密码显⽰隐藏的效果：
<i class="eye" ng-click="vm.showPwd($event)" ng-class="vm.eyeStatus ? 'eyeOpen':'eyeClose'"></i>
那么到这⾥本⽂就结束了，希望对你有所帮助！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。