Click on button and close another button

Issue

Here's code :

 <table>
        <thead style="background-color: lightgray;">
          <tr>
            <td style="width: 30px;"></td>
            <td>
              Name
            </td>
            <td>Gender</td>
          </tr>  
        </thead>
        <tbody>
          <tr ng-repeat-start="person in people">
            <td>
              <button ng-if="person.expanded" ng-click="person.expanded = false">-</button>
              <button ng-if="!person.expanded" ng-click="person.expanded = true">+</button>
            </td>
            <td>{{person.name}}</td>
            <td>{{person.gender}}</td>
          </tr>
          <tr ng-if="person.expanded" ng-repeat-end="">
            <td colspan="3">{{person.details}}</td>
          </tr>
        </tbody>
      </table>

plunker :

http://plnkr.co/edit/yYq1dt?p=preview

What I want to do : when I click ex. "Bob" the informations will collapse. Then when I click another person I want to close the "Bob".

Solution

Here's the edit to the code given in the link. Simply call the function which makes the expanded tabs as false.

HTML

    <tbody>
      <tr ng-repeat-start="person in people">
        <td>
          <button ng-if="person.expanded" ng-click="expand(person)">-</button>
          <button ng-if="!person.expanded" ng-click="expand(person)">+</button>
        </td>
        <td>{{person.name}}</td>
        <td>{{person.gender}}</td>
      </tr>
      <tr ng-if="person.expanded" ng-repeat-end="">
        <td colspan="3">{{person.details}}</td>
      </tr>
    </tbody>

JS

function repeatTest($scope) {
  $scope.people = [
    {name: "Bob", gender: "Male", details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nisi quis mi tincidunt luctus ut quis nunc. Nam non risus tincidunt risus sodales condimentum. Morbi sed gravida elit. Nunc a turpis vestibulum elit posuere blandit. Phasellus luctus lectus non porta auctor. Etiam pellentesque imperdiet posuere. Nullam adipiscing congue nisl, in vulputate odio ornare ac."},
    {name: "Jane", gender: "Female", details: "Maecenas quis sodales lectus, vitae convallis ipsum. Ut ac viverra tellus. Quisque vulputate, orci placerat eleifend scelerisque, eros nunc rutrum odio, pharetra mattis leo neque vel eros. Cras id purus nec lorem vehicula rutrum a vel arcu. Quisque eget euismod augue. Integer volutpat auctor lorem, quis lacinia nisl tempus nec. Nunc fringilla, odio eget molestie varius, tortor turpis dignissim lacus, sed varius nunc velit eu turpis. Etiam sed congue diam. In ornare elit nec dolor faucibus ornare. Ut eget erat vel elit tristique iaculis. Maecenas et semper lorem. Nam mollis ante et ipsum vestibulum posuere. Ut non purus non risus tempor vulputate et vitae ipsum. Mauris et sem sit amet quam pulvinar fringilla."},
    {name: "Bill", gender: "Male", details: "Quisque rhoncus scelerisque sapien, tempor vestibulum dui tincidunt eu. Maecenas scelerisque, dolor sed vehicula pulvinar, ligula erat ornare arcu, in dictum ipsum libero vel est. Donec porttitor venenatis lacus, a laoreet orci. Proin quam mi, ultrices in ullamcorper vel, malesuada suscipit lectus. Nam faucibus commodo quam, auctor vehicula felis condimentum quis. Phasellus tempor molestie enim, at vehicula justo auctor eu. Pellentesque venenatis elit eu malesuada fringilla."}
  ];
  $scope.expand = function(selectedperson) {

    var boolexpansion = !selectedperson.expanded;

    angular.forEach($scope.people, function(person) {
      person.expanded = false;
   });
   if(boolexpansion) {
     selectedperson.expanded = !selectedperson.expanded;
   }
  }
}

Answered By - Sagar