Javascript AngularJS问题

我有由ng repeat生成的div，在它们里面我有内部div。我希望当用户单击外部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;
            }
        }

课程
{{course.name}
X
停止
开始
$scope.bot=false；
$scope.tog=函数（）{
如果（！$scope.bot）{
$scope.bot=true；
}
}

只需将可见性标志放置在课程对象本身上，因此每门课程都有自己的标志：

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

课程
{{course.name}
X
暂停/恢复
中止
细节
$scope.tog=函数（课程）{
如果（！course.bot）{
course.bot=true；
}
}

只需将可见性标志放在课程对象本身上，每个课程都有自己的标志：

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

课程
{{course.name}
X
暂停/恢复
中止
细节
$scope.tog=函数（课程）{
如果（！course.bot）{
course.bot=true；
}
}

这是一个选项：

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

课程
{{course.name}
X
暂停/恢复
中止
细节
$scope.bot=[]；
$scope.tog=函数（索引）{
$scope.bot[index]=！$scope.bot[index]；
}

这是一个选项：

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

课程
{{course.name}
X
暂停/恢复
中止
细节
$scope.bot=[]；
$scope.tog=函数（索引）{
$scope.bot[index]=！$scope.bot[index]；
}

试试这个

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

课程
{{course.name}
X
停止
开始

试试这个

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

课程
{{course.name}
X
停止
开始

---

一种简单的方法是从控制器中删除与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>

课程
{{course.name}
X
暂停/恢复
中止
细节

---

您可以在每个父div级别初始化bot变量，因为ng repeat为每个元素创建了一个新的作用域。

一个简单的方法是从控制器中删除与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>

课程
{{course.name}
X
暂停/恢复
中止
细节

---

您可以在每个父div级别初始化bot变量，因为ng repeat为每个元素创建了一个新的作用域。

您遇到的这个问题是因为您使用了一个与所有div关联的bot变量

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

课程
{{course.name}
X
暂停/恢复
中止
细节
$scope.tog=函数（索引）{
$scope.courses[index].bot=！$scope.courses[index].bot；
}

您遇到此问题是因为您使用了一个与所有div关联的bot变量

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

课程
{{course.name}
X
暂停/恢复
中止
细节
$scope.tog=函数（索引）{
$scope.courses[index].bot=！$scope.courses[index].bot；
}