如何在Razor页面与Angular中根据变量条件渲染div类？

我来帮你搞定这两个框架里的条件类渲染问题～

在Razor页面里，我们可以直接利用它的内联C#表达式来实现动态类名渲染，核心就是用@()包裹条件判断逻辑，让Razor引擎执行并输出结果到HTML属性中。

举个例子，假设你有一个后台传递到页面的集合变量myArray，想要根据它的长度切换div的类：

@* 假设myArray是后台通过模型或ViewBag传递的集合 *@
<div class="@(myArray.Length > 0 ? "col-md-8" : "col-md-12")"></div>

这里的@()会执行里面的三元运算符判断：如果myArray的长度大于0，就输出col-md-8，否则输出col-md-12，完美实现条件渲染。

你提到用的是$scope，应该是AngularJS（v1.x）版本，这里我们可以用Angular自带的ng-class指令来实现动态类名，有两种常用写法：

写法一：对象语法（更清晰，适合多条件场景） #

通过键值对的方式定义类名和对应的条件，满足条件的类会被添加：

<div ng-class="{'col-md-8': myArray.length > 0, 'col-md-12': myArray.length === 0}"></div>

写法二：三元表达式（和Razor写法类似，适合二选一场景） #

直接在ng-class里写Angular表达式的三元判断，语法和JavaScript一致：

<div ng-class="myArray.length > 0 ? 'col-md-8' : 'col-md-12'"></div>

因为你已经在script里定义了$scope.myArray = []，页面上可以直接通过myArray访问到这个变量，Angular会自动监听它的变化，实时更新div的类名哦～

内容的提问来源于stack exchange，提问作者BeaST 30