基于ng-class

Question

这是我的指令模板代码。

'<div>' +
     '{{object.classificationName}}&nbsp;&nbsp;<span ng-class="(toggle ? \'icon- 
remove-contain\' : \'icon-add-contain\') + ' ' + ({{object.valueExists}} ? \'collapsed\': \'\')" data-toggle="collapse" data-target="#{{object.classificationId}}" ng-click="toggle = !toggle"></span>' +
'</div>'

我在ng-class中使用了两个三元运算，中间有一个空白区域。但是，它没有用。可能是什么错误？

输出：

  

未捕获的SyntaxError：意外的字符串

Answer 1

  

（\'icon-add-contain\') + ' ' + ({{object.valueExists}} ? \'）

中的语法错误

尝试将+ ' ' +替换为' + ' ' + '

Answer 2

var module = angular.module("myModule", []);

module.controller("myController", function($scope) {
  $scope.valid = true;
  $scope.enabled = true;
  
});

.blue {
    color : blue;
}
.red {
    color : red;
}

.big {
    font-weight : bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myModule">
  <!--
  ng-controller - associates any HTML element with any of the 
  controllers in your module.
  -->
  <div ng-controller="myController">
  <span ng-class="(valid ? 'red' : 'blue').concat((enabled ? ' big': ''))">
        Big Red</span>
</div>

ng-class参数必须是一个JavaScript表达式，其值为空格分隔的类名称字符串。

您可以使用String.prototype.concat来创建这样的表达式（请参阅代码段）

另一方面，我发现你的代码有点复杂，使用两个三元运算符并不容易阅读。