AngularJS Issues

Question

我有由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;
            }
        }

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 级别初始化机器人变量，因为 ng-repeat 为每个元素创建一个新范围。

Answer 5

您遇到此问题是因为您使用了一个与所有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;
}