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