标签: ng-class

我想知道，在 Angular 中使用 ngClass/[ngClass] 而不是 class 的真正好处是什么？是否存在性能差异？

<div class="foobar">text</div>

或者

<div ngClass="foobar">text</div>

是否可以通过用ng-class替换ng-switch来避免重复代码.

<li ng-repeat="el in elm.required">
    <span ng-switch on="el.type" >
        <i class="icon-file" ng-switch-when="upload" tooltip="{{el.name}}" ng-class="{'muted':!el.completed}"></i>
        <i class="icon-check" ng-switch-when="checkbox" tooltip="{{el.name}}" ng-class="{'muted':!el.completed}"></i>
        <i class="icon-calendar" ng-switch-when="date" tooltip="{{el.name}}" ng-class="{'muted':!el.completed}"></i>
        <i class="icon-pencil" ng-switch-when="text" tooltip="{{el.name}}" ng-class="{'muted':!el.completed}"></i>
        <i class="icon-envelope" ng-switch-when="email" tooltip="{{el.name}}" ng-class="{'muted':!el.completed}"></i>
    </span>
</li>

有这样的东西(不工作,因为有两个ng级指令):

<li ng-repeat="el in elm.required">
    <i tooltip="{{el.name}}" ng-class="{upload:'icon\-file', checkbox:'icon\-check', 'date':'icon\-calendar', text:'icon\-pencil', 'email':'icon\-envelope'}[el.type]" ng-class="{'muted':!el.completed}" ></i>
</li>

我需要根据范围变量的长度应用一个类

  <div class="col-md-1">
    <i class="float-right" ng-class="{'user-online':activeAssignments.length > 0, 'user-offline': activeAssignments.length <= 0}"></i>
</div>

我能做这样的事情,还是有更好的方法呢？

$scope.activeAssignments 在控制器中定义

此代码在ng-repeat循环中.表达式不是在浏览器内部进行评估,整个语句也是在浏览器中.

 <i ng-class="'icon-ok' : student.is_passed == 'passed', 'icon-remove': student.is_passed == 'failed'"></i>

我的 Angular 应用程序中有这个浮动按钮，

  <button [ngClass]="{
  'mdc-fab--extended': extendedClass,
  'mdc-fab--mini': miniClass
}" class="mdc-fab mdc-fab--touch    ">
<div class="mdc-fab__ripple"></div>
<span class="material-icons mdc-fab__icon">mail</span>
<!-- <span class="floating-span">My Invite Link</span> -->
<div class="mdc-fab__touch"></div>

当屏幕尺寸为 768px 或更低时，我需要将 mdc-fab--extended className 更改为 mdc-fab--mini 吗？我可以做什么来实现这个功能？谢谢

我已经尝试过，但课程没有被删除/添加

    if (window.innerWidth < 768) {
  this.miniClass = true;
  this.extendedClass = false;
} else {
  this.miniClass = false;
  this.extendedClass = true;
}

在这里，我想在 div 中传递一个条件，当它包含某个数字时显示某种颜色。

条件是：

      if (num >= -100.0 && num <= -35.0) {
          return '#f1403b';
        } else if (num > -35.0 && num <= 35.0) {
          return '#ffc200';
        } else {
          return '#34A853';
        }

app.component.html
---------------------
 <div  [ngStyle]="{'color': (num >= '-100.0' && num <= '-35.0' ) ? '#f1403b' : ( (num > '-35.0' && num <= '35.0') ? '#ffc200' :'#34A853')
}">
({{num}})
</div>