Question

我正面临着ng-class的问题，如果我点击传递一个变量并在ng-class中检查它是否为真，如果它是真的那么我附加“col-xs-6”类。

我在这里尝试了一些东西

<div ng-class="{'col-xs-6': myVar}">
<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="myVar" data-toggle="collapse" data-target="{{'#'+toggle}}">{{candidateInfo.name}} resume</a></div>
        </div>
    </div>
</div>

<div id="{{toggle}}" class="collapse" ng-class="{'col-xs-6': myVar}">
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.

但这不起作用

我不知道我哪里出错了

我已经在plunker中尝试了它demo

感谢任何帮助。

Answer 1

您正在使用角度2.0并为angulat 1.5编写代码。将库更改为角度1

此外，你的myvar没有在范围内定义，它总是会变成b falsy

Answer 2

你必须如下所示。

https://plnkr.co/edit/Bx9s88ASSxGkgJDj0U0L?p=preview

<!DOCTYPE html>
 <html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

<div >
<div ng-class="{'col-md-6': myVar == true}">
  <div class="panel panel-default">
    <div class="panel-heading header-background">

      <div class="row">
        <div class="col-xs-2"><a style="cursor:pointer" class="pull-right">John</a></div>
        <div class="col-xs-offset-9"><a style="cursor:pointer" ng-click="myVar=true" data-toggle="collapse" data-target="{{'#'+toggle}}">John resume</a></div>
      </div>
    </div>
  </div>
  <div id="{{toggle}}"  ng-class="{'col-xs-6': myVar == true}">
    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.
  </div>
</div>
</div>


</body>

</html>

和脚本

 $scope.toggle = "accor"
         $scope.myvar = false;

注意：我已经从col-xs-6到col-md-6，因为我正在使用笔记本电脑。如果你在移动设备上检查这个，col-xs-6将以类似的方式工作。

ng-click时，ng-class无法正常工作

2 个答案: