0

私は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は私のソリューションよりも少し上手に書かれています:)）

4

3 に答える 3

3 
<button ng-class="{
    'btn pull-left' : true,
    'btn-warning' : duplicatesInList,
    'btn-success' : !duplicatesInList
    }"
id="saveScoreButton" type="button" ng-click="add()"><button>
于 2014-06-04T19:23:43.990 に答える
1

別の解決策は、

<button class="btn pull-left" 
ng-class="duplicatesInList ? 'btn-warning': 'btn-success'"
id="saveScoreButton" type="button" ng-click="add()"></button>
于 2016-06-21T07:19:41.070 に答える
0

これが実際の例です：

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。

于 2014-06-04T19:43:27.867 に答える