Eddy Freeman Eddy Freeman - 5 months ago 8
AngularJS Question

AngularJS Issues

I have DIVs generated by ng-repeat and inside them i have inner DIVs.I would like the inner DIVs to be visible when a user click on the outer DIVs. An inner DIV must be visible only when its outer DIV is clicked. I implemented it with $scope.bot variable and its not working as i want since when one outer DIV is clicked, all the inner DIVs of the other outer DIVs become visible (this is because they all depend on the $scope.bot variable).

I would like to also click on the outer div again and the inner DIV if it is visible then it will disappear.

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


Thanks for your help

Answer

This is an 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];
}
Comments