AngularJS問題

Question

我有由ng-repeat生成的DIV，在它們內部我有內部DIVs.I想要在用戶點擊外部DIV時看到內部DIV。內部DIV只有在點擊外部DIV時纔可見。我用$ scope.bot變量實現了它，並且它不工作，因爲當單擊一個外部DIV時，其他外部DIV的所有內部DIV都變得可見（這是因爲它們都依賴於$ scope.bot變量） 。

我想再次單擊外部div和內部DIV，如果它是可見的，那麼它將消失。

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

感謝您的幫助

Answer 1

這是一個選項：

<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

只需將可視性標誌的課程對象本身，所以每門課程都會有它自己的標誌：

<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

試試這個

<div> 
<div>Course</div> 
<div ng-repeat="course in courses" ng-click="course.bot = !course.bot"> 

    {{course .name}} 

    <div ng-show="course.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> 

Answer 4

一個簡單的方法來做到這一點是消除一切方面出現的div和控制器消失，以及如何在模板的一切。

<div> 
     <div>Course</div> 
     <div ng-repeat="course in courses" ng-init="bot=false" ng-click="bot = !bot"> 

     {{course .name}} 

      <div ng-show="bot"> 
      <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> 

您可以初始化每個父級div級別的bot變量，因爲ng-repeat會爲每個元素創建一個新的範圍。

Answer 5

由於您正在使用一個bot與所有div關聯的變量，因此存在此問題。

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