添加活動類dynamicaly無法正常工作

我已經添加類動態使用角js，但它無法正常工作。我是新的角js給我一些建議來解決這個問題。這裏是我的HTML代碼 -添加活動類dynamicaly無法正常工作

<div class="col-md-15 col-sm-3" ng-repeat="data in plan"> 
      <div class="panel panel-green" ng-class="{true: 'active'}[{{data.price}} == {{amount}}]"> 
       <div class="panel-heading" align="center"> <span class="{{data.logo}} custom-icon" ></span> 
        <h5 class="panel-text">{{data.title}}</h5> 
       </div> 
       <div class="panel-body"> 
        <div class="price-container"> 
         <span class="dollar">$</span> 
         <span class="price">{{data.price}}</span> 
         <span class="terms">p/m</span> 
        </div> 
        <div class="panel-text"><p>{{data.text}}</p> 
        </div> 
        <div class="start-button" align="center"> 
         <label class="btn btn-default"> 
          <input type="radio" name="price" ng-model="amount" ng-value="{{data.price}}" ng-click="addPayment(amount)"> 
         </label> 
        </div> 
       </div> 
      </div> 
     </div>

這裏是我的角度控制器 -

appControllers.controller('AccountSettingController',['$scope', 
    'Title','$http', function($scope,Title,$http) { 
     //default Selected plan 
    $scope.amount = 47; 
     $scope.plan= [ 
      { 
       "logo" : "glyphicon glyphicon-user", 
       "title" : "Let's Start", 
       "price" : 47, 
       "text" : "For powerful small teams of up to 25. A set and forget low fixed rate." 
      }, 
      { 
       "logo" : "glyphicon glyphicon-home", 
       "title" : "Growing Places", 
       "price" : 87, 
       "text" : "Supporting your growth. Teams of 26 to 50 'Growing places'." 
      }, 
      { 
       "logo" : "glyphicon glyphicon-book", 
       "title" : "Team Effort", 
       "price" : 167, 
       "text" : "Together we are better. Team effort 51 to 100 and climbing." 
      }, 
      { 
       "logo" : "glyphicon glyphicon-credit-card", 
       "title" : "Bigger Biz", 
       "price" : 397, 
       "text" : "For organizations of 101 to 250. Fixed rate with allowance for scaling." 
      }, 
      { 
       "logo" : "glyphicon glyphicon-tower", 
       "title" : "Megacorp", 
       "price" : 1, 
       "text" : "Tailored for teams greater than 250. Corporate, multi-site & franchise." 
      } 
      ]; } ]);

來源

2016-05-06 Lokendra Panwar

更改這個

ng-class="{'active':data.price == amount}"

來源

2016-05-06 07:09:59 byteC0de

語法

<div ng-class="{value1:'class1'}[condition]"></div> 

<div ng-class="condition?'class1':'class2'"></div> 

<div ng-class="'class1':condition"></div>

改變你的條件，這裏不需要{{}}。

<div class="panel panel-green" ng-class="{true:'active'}[(data.price == amount)]" >

來源

2016-05-06 07:16:22 Hmahwish

添加活動類dynamicaly無法正常工作

回答

相關問題