I have dynamically added a class using AngularJS, but it seems to not be functioning correctly. As I am new to AngularJS, I would appreciate any suggestions to resolve this issue. Below is my HTML code:
<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>
Below is my Angular controller for reference:
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."
}
];
}]);