Question

如果我使用此代码

<td ng-class="'log-level-' + {{log.level | uppercase}}">

这是渲染结果：

<td ng-class="'log-level-' + WARN" class="log-level-">

如果我删除双括号

<td ng-class="'log-level-' + log.level">

渲染结果为

<td ng-class="'log-level-' + log.level" class="log-level-Warn">

是否无法在HTML中大写第二个log.level属性并将其与字符串混合？

// // EDIT

永远不会。输入问题让我意识到我可以在一个字符串中使用angularjs表达式。

<td ng-class="'log-level-' + '{{log.level | uppercase}}'">

我认为这只会将{{log.level | uppercase}}值呈现为字符串，但它仍会先处理表达式。

Answer 1

输入问题让我意识到我可以在字符串中使用angularjs表达式。

 <td ng-class="'log-level-' + '{{log.level | uppercase}}'">

我认为这只会将{{log.level | uppercase}}值呈现为字符串，但它仍会先处理表达式。

Answer 2

<td class="static-class {{log.level}}">
    Test
</td>

我添加了示例应用，还会检查Fiddler

<div ng-controller="testCtrl">
  {{test}}
  <table>
    <tr>
      <td class="static-class">
        Test
      </td>
    </tr>
    <tr>
      <td class="static-class {{runtimeClass}}">
        Test
      </td>
    </tr>
  </table>
  <button type="button" ng-click="addRuntimeClass()">
    click
  </button>
</div>

var app = angular.module('testApp',[])
app.controller('testCtrl',['$scope', 
function($scope){
    $scope.test='Sample test app';
  $scope.addRuntimeClass = function(){
    $scope.runtimeClass = 'runtime-class'
  }
}])

.static-class{
  display:block;
  color:black;
}

.runtime-class{
  display:block;
  color:red;
}

ng-class mix string with angular annotation

2 个答案: