ng-class 中的表达式语法错误？答案

【问题标题】：Bad syntax of expression in ng-class?ng-class 中的表达式语法错误？
【发布时间】：2014-06-04 19:16:25
【问题描述】：

我正在学习 Angular.js，我有这段代码：

<button ng-class="{'btn pull-left', 
duplicatesInList === true ? 'btn-warning': 'btn-success'}" 
id="saveScoreButton" type="button" ng-click="add()"><button>

语法有问题，但我不知道是什么...我想做的是在列表中找到重复项，当有重复项时，我想通过更改保存按钮样式来警告用户（类 btn-warning ）。任何人决定帮助我，我都会很高兴，提前谢谢你。更新：控制台日志：

Error: [$parse:syntax] http://errors.angularjs.org/1.2.16/$parse/syntax?p0=%2C&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=17&p3=%7B'btn%20pull-left'%2CNaNuplicatesInList%20%3D%3D%3D%20true%20%3F%20'btn-warning'%3A%20'btn-success'%7D&p4=%2C%duplicatesInList%20%3D%3D%3D%20true%20%3F%20'btn-warning'%3A%20'btn-success'%7D

对我来说很奇怪。 解决方案：

ng-class="duplicatesInList === true? 
'btn btn-warning pull-left': 'btn btn-success pull-left'"

答案中的代码也有效（而且 IMO 比我的解决方案写得更好：））

【问题讨论】：

你检查过 JavaScript 控制台吗？
@jsalonen 是的，我收到了一个非常奇怪的错误，我现在把它放在我的帖子中。

标签： javascript angularjs twitter-bootstrap button ng-class

【解决方案1】：

<button ng-class="{
    'btn pull-left' : true,
    'btn-warning' : duplicatesInList,
    'btn-success' : !duplicatesInList
    }"
id="saveScoreButton" type="button" ng-click="add()"><button>

【讨论】：

感谢您的帮助 - 我粘贴了您的代码，但不幸的是仍然无法正常工作...
您是否收到错误消息？我稍微编辑了答案，在“btn pull-left”类之后包含一个“：true”，但不确定你是否包含了这个。
我找到了另一种方法，但您的解决方案也有效 - 谢谢 :)

【解决方案2】：

另一种解决方案是，

<button class="btn pull-left" 
ng-class="duplicatesInList ? 'btn-warning': 'btn-success'"
id="saveScoreButton" type="button" ng-click="add()"></button>

【讨论】：

【解决方案3】：

这是一个工作示例：

HTML：

<div ng-app='myApp' ng-controller='testCtrl'>

<button ng-class="{
    'btn-pull-left' : true,
    'btn-warning' : duplicatesInList,
    'btn-success' : !duplicatesInList
    }" id="saveScoreButton" type="button" ng-click="add()">Here</button>
    </div>

CSS：

.btn-pull-left
{
    float:left;
}

.btn-warning
{
    color:blue;
}

.btn-success
{
    color: green;
}

JS：

angular.module('myApp',[]).
controller('testCtrl',function ($scope){
    $scope.add = function(){
        $scope.duplicatesInList = !$scope.duplicatesInList;
    }
});

还有最重要的 -> FIDDLE.

【讨论】：

谢谢，我找到了另一个解决方案，但您的代码效果很好 - 谢谢：D