CODEWITHSUNDEEP
javascripthtmlangularjs
Eddy Freeman
Eddy Freeman

Reputation: 3309

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 it's 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;
            }
        }

Upvotes: 0

Views: 65

Answers (5)

Lalit Kishor
Lalit Kishor

Reputation: 89

This issue you are having because you are using one bot variable which is associated to all divs.

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

Upvotes: 0

rave
rave

Reputation: 1032

A simple way to do this is to remove everything regarding divs appearing and disappearing from controller and handle everything in the template.

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

You can initialize the bot variable at each parent div level because ng-repeat creates a new scope for every element.

Upvotes: 0

E. Abrakov
E. Abrakov

Reputation: 463

Try this

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

Upvotes: 0

Arathi Sreekumar
Arathi Sreekumar

Reputation: 2584

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

Upvotes: 2

Ron Dadon
Ron Dadon

Reputation: 2706

Just place the visibility flag on the course object itself, so every course will have it's own flag:

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

Upvotes: 1

Related Questions