この単純なAngularJS反復でHTML要素の2つのCSSクラスを切り替えるにはどうすればよいですか？

Question

角の初心者。私は.greenと.defaultのCSSクラスを現在の.box要素でクリックして切り替えることを試みています。 [JB Nizetの提案した後、私は偽の、今それが働いているとnullを置き換える次のコードを修正しました]

index.htmlを

<div class="container"> 
    <div class="row"> 
     <!-- SELECTION APP --> 
     <div class="col-md-4 col-md-offset-4" ng-app="Selection" ng-controller="Selection as Select"> 
      <div class="row"> 
       <div class="col-md-12" ng-repeat="course in Select.data"> 
        <div class="box well clearfix " 
          ng-click="Select.toggleSelect(course)" 
          ng-class="{'green' : course.selected, 'default': !course.selected}" 
          > 
         <h3 class="courseName"><b>{{course.name}}</b>: ({{course.duration}} months) ${{course.price}}</h3> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- /SELECTION APP --> 
    </div> 
</div> 

<script src="js/angular.min.js"></script> 
<script src="js/app.js"></script> 
<script src="js/controllers/Select.js"></script> 
<script src="js/factories/DataService.js"></script> 

JS/app.js

(function() 
{ 
    angular.module('Selection',[]); 

})(); 

js/controllers/Select.js

(function() 
{ 
    angular 
    .module('Selection') 
    .controller('Selection', Selection); 

    Selection.$inject = ['DataService'] 

    function Selection(DataService) 
    { 
     this.data = DataService.courseData; 
     this.currentClass = 'default'; 

     this.toggleSelect = function(course) 
     { 
      if (course.selected === false) 
      { 
       course.selected = true; 
      } 
      else 
      { 
       course.selected = false; 
      } 
     } 
    } 

})(); 

JS /工場/ DataService.js

(function() 
{ 
    angular. 
    module('Selection') 
    .factory('DataService', DataService); 

    function DataService() 
    { 
     return data = { 
      courseData: courseData 
     } 
    } 

    var courseData = 
    [ 
     { 
      name: 'AngularJS', 
      duration: 1, 
      price: 250, 
      selected: false 
     }, 
     { 
      name: 'NodeJS', 
      duration: 1.5, 
      price: 350, 
      selected: false 
     }, 
     { 
      name: 'ReactJS', 
      duration: 2.5, 
      price: 500, 
      selected: false 
     } 
    ] 

})(); 

プレビュー：

コンソールは、構文ではエラーを報告していないと私はにできませんよ私が間違っていた場所を見つけてください。エラーが見つかった場合には、私に助けてください。どうもありがとう。

Answer 1

3者演算子が間違っているようです。 = "？course.selected 'グリーン'： 'デフォルト'"

NG-クラスcourse.selected場合

この方法では、真（または単にfalsyない）で、NG-クラスは、もちろん場合は緑色になります.selectedはfalse（または単に偽り）ですが、デフォルトになります。