Question

我使用角度js动态添加了类，但它无法正常工作。我是角度js的新手给我一些建议来解决这个问题。这是我的Html代码 -

<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."
            }
            ];  } ]);

Answer 1

更改为

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

Answer 2

语法

  <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)]" >

添加活动类dynamicaly无法正常工作

2 个答案: