ng-click如果为true,则使用ng-class

时间:2016-06-30 12:13:48

标签: javascript angularjs

我有一个与切换相同的场景,其中我附加了类col-xs-6并将页面分成两个视图。 在这里,当我第一次点击我传递一个变量值为真,在ng-class我正在检查一个条件,如果它是真的然后我附加col-xs-6类

这是我试过的html代码

<div ng-class="{'col-xs-6': isClick}">
<div class="panel panel-default panel-height" ng-repeat="candidateInfo in aCandidateDetails track by $index">
    <div class="panel-heading header-background">
        <div stop-watch time="xyz" name="candidateInfo.name" time-of-interview="candidateInfo.doi" class="stop-watch"></div>
        <div class="row">
            <div class="col-xs-2"><a style="cursor:pointer" class="pull-right">{{candidateInfo.name}}</a></div>
            <div class="col-xs-offset-9"><a style="cursor:pointer" ng-click="isClick=!isClick" data-toggle="collapse" data-target="{{'#'+toggle}}">{{candidateInfo.name}} resume</a></div>
        </div>
    </div>
</div>

<div id="{{toggle}}" class="collapse" ng-class="{'col-xs-6': isClick}">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

我不知道我哪里出错了

感谢任何形式的帮助。

2 个答案:

答案 0 :(得分:0)

@ Piyush.kapoor,这是我的控制器代码

angular.module('hrPortalApp')
.controller('candidateInterviewCtrl', function($scope, $state, iterateArray, getCandidateInterviewListService) {
    getCandidateInterviewListService.fnGetCandidateDetails(localStorage.getItem('username')).then(function(response) {
        $scope.aCandidateDetails = response;

    });
});

答案 1 :(得分:0)

您可以通过以下代码

进行管理
<input id="setbtn" type="button" value="set" ng-click="myVar='my-class'">
<input id="clearbtn" type="button" value="clear" ng-click="myVar=''">
<span class="base-class" ng-class="myVar">Sample Text</span>

在第一次点击上面的代码中,你必须将myvar设置为'col-xs-6',并在切换时你必须把它搞定。