CODEWITHSUNDEEP
angularjshideshow
dragon_heart
dragon_heart

Reputation: 69

Angularjs hide row if another row is selected

I have a html/angularjs table that contains the ff :

 <tbody ng-repeat="x in Persons">
                    <tr>
                        <td>{{x.FirstName}}</td>
                        <td>{{x.LastName}}</td>
                        <td>{{x.Department}}</td>                           
                        <td>
                            <a href"#" data-ng-click="x.show = !x.show">
                             Sales Details
                            </a>

                        </td>
                    </tr>
                    <tr>
                     <td ng-show="x.show">
                        <!--user sales details here-->
                     </td>
                    </tr>
    </tbody>

Currently, if I click on the first row it shows the details but I need to click it again to hide it. I want to hide the first row details if the 2nd row is clicked. How do I go about this?

Upvotes: 1

Views: 26

Answers (2)

Panos K
Panos K

Reputation: 1081

you need a method for this

take a look https://stackblitz.com/edit/js-tv6dog?file=index.js

js:

$scope.clicked = function(index){
 let currentOption=$scope.Persons[index].show;
 $scope.Persons.forEach(x=>x.show=false);
 $scope.Persons[index].show=!currentOption;
}

html

<td>
  <a href"#" data-ng-click="clicked($index)">
  Sales Details
 </a>
</td>

and of course add track by to ng-repeat

<tbody ng-repeat="x in Persons track by $index">

Upvotes: 1

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

Try this. i hope this what exactly what you want.

var app = angular.module("app", []);
app.controller("name", function($scope) {
 $scope.Persons=[{"FirstName":"Ramesh","show":false},{FirstName:"Suresh","show":false}];
 $scope.showorhide = function(index){
 var currentOption=$scope.Persons[index].show;
  $scope.Persons.forEach(x=>x.show=false);
  $scope.Persons[index].show=!currentOption;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="name">
<table>
<tbody ng-repeat="x in Persons">
                    <tr>
                        <td>First Name</td>                   
                        <td>
                            <a href"#/" style="color:red" ng-click="showorhide($index)">
                           open/close
                            </a>

                        </td>
                    </tr>
                    <tr ng-show="x.show">
                     <td >
                        {{x.FirstName}}
                     </td>
                    </tr>
    </tbody>
    </table>
</div>

Upvotes: 1

Related Questions