AngularJS Probleme

Question

Ich habe DIVs generiert von ng-repeat und in ihnen habe ich innere DIVs.I möchte die inneren DIVs sichtbar sein, wenn ein Benutzer auf die äußeren DIVs klicken. Ein innerer DIV muss nur sichtbar sein, wenn sein äußerer DIV angeklickt wird. Ich habe es mit der Variablen $ scope.bot implementiert und es funktioniert nicht so, wie ich es möchte, da beim Klicken auf ein äußeres DIV alle inneren DIVs der anderen äußeren DIVs sichtbar werden (weil sie alle von der Variablen $ scope.bot abhängen) .

Ich möchte auch auf das äußere div wieder klicken und das innere DIV, wenn es sichtbar ist, dann wird es verschwinden.

<div> 
    <div>Course</div> 
    <div ng-repeat="course in courses" ng-click=" tog()"> 

     {{course .name}} 

     <div ng-show="bot== true"> 
      <div class="pull-right"><span>X</span></div> 

      <button class="btn btn-primary">Stop</button> 
      <button class="btn btn-danger">Start</button> 
     </div> 

    </div> 
</div> 



$scope.bot = false; 

     $scope.tog = function(){ 
      if(!$scope.bot){ 
       $scope.bot = true; 
      } 
     } 

Danke für Ihre Hilfe

Answer 1

Dies ist eine Option:

<div> 
    <div>Course</div> 
    <div ng-repeat="course in courses" ng-click="tog($index)"> 

     {{course .name}} 

     <div ng-show="bot[$index]== true"> 
      <div class="pull-right"><span>X</span></div> 

      <button class="btn btn-primary">Pause/Resume</button> 
      <button class="btn btn-danger">Abort</button> 
      <button class="btn btn-success">Detail</button> 
     </div> 

    </div> 
</div> 



$scope.bot = []; 
$scope.tog = function(index){ 
     $scope.bot[index] = !$scope.bot[index]; 
} 

Answer 2

Legen Sie einfach die Sichtbarkeit Flagge auf dem Kurs Objekt selbst, so wird jeder Kurs über eine eigene Flagge:

<div> 
    <div>Course</div> 
    <div ng-repeat="course in courses" ng-click=" tog(course)"> 

     {{course .name}} 

     <div ng-show="course.bot== true"> 
      <div class="pull-right"><span>X</span></div> 

      <button class="btn btn-primary">Pause/Resume</button> 
      <button class="btn btn-danger">Abort</button> 
      <button class="btn btn-success">Detail</button> 
     </div> 

    </div> 
</div> 

$scope.tog = function(course){ 
    if(!course.bot){ 
     course.bot = true; 
    } 
} 

Answer 3

Versuchen Sie diese

Answer 4

Ein einfacher Weg, dies zu tun, ist alles, was in Bezug auf divs erscheinen und verschwindet von der Steuerung und hat alles im Griff in der Vorlage zu entfernen.

Sie können die Bot-Variable auf jeder übergeordneten Div-Ebene initialisieren, da ng-repeat für jedes Element einen neuen Bereich erstellt.

Answer 5

Dieses Problem haben Sie, weil Sie eine bot Variable verwenden, die allen divs zugeordnet ist.

<div> 
    <div>Course</div> 
    <div ng-repeat="course in courses" ng-click=" tog($index)"> 
     {{course .name}} 
     <div ng-show="course.bot== true"> 
      <div class="pull-right"><span>X</span></div> 

      <button class="btn btn-primary">Pause/Resume</button> 
      <button class="btn btn-danger">Abort</button> 
      <button class="btn btn-success">Detail</button> 
     </div> 

    </div> 
</div> 

$scope.tog = function(index){ 
     $scope.courses[index].bot = !$scope.courses[index].bot; 
}