Javascript ng类在ng单击时未在条件为真的情况下工作_Javascript_Angularjs

Javascript ng类在ng单击时未在条件为真的情况下工作

javascript angularjs

Javascript ng类在ng单击时未在条件为真的情况下工作,javascript,angularjs,Javascript,Angularjs,我在ng类中面临一个问题，如果我单击传递一个变量并在ng类中检查它是否为真，如果它为真，那么我将附加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="p

我在ng类中面临一个问题，如果我单击传递一个变量并在ng类中检查它是否为真，如果它为真，那么我将附加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>

但这是行不通的

我不知道我哪里出错了

事实上，我在普朗克也试过

非常感谢您的帮助。

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

此外，您的myvar未在范围内定义，它始终会转到b falsy

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

此外，您的myvar没有在范围内定义，它总是指向b falsy

，您必须将其设置为如下所示

注意：由于我在笔记本电脑上工作，因此我将类从col-xs-6更改为col-md-6。如果您在移动设备上检查此项，col-xs-6将以类似的方式工作。

您必须按以下方式设置

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

是的，我尝试将其值设置为ng click=myVar='true'，在ng class='col-xs-6'：myVar='true'}，但它不工作。您的plunker与Angular2有问题。尝试使用不同的版本我已经尝试过给它一个值作为ng click=myVar='true'，并且在ng class={'col-xs-6'：myVar=='true'}中，但它不起作用。你的plunker与Angular2有问题。尝试使用不同的版本为此，我需要在控制器中调用一个函数，我需要定义$scope.myVar=它是否正确？是的，绝对正确$scope.myVar=true//或者false，或者通过一些点击手柄来切换它，所以为此，我需要在控制器中调用一个函数，我需要定义$scope.myVar=它是否正确？是的，绝对正确$scope.myVar=true//或false，或通过某个单击处理程序进行切换

<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.

<!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;