JSFiddle - React, Tailwind, and code Playground

by mavdhana

HTML

<div ng-controller="repeatPeople">
<br>
<p>
<input type="text" id="search" ng-model="searchPeople" 
 placeholder="Search" >
</p><br><br>
      <table border="0">
        <thead style="background-color: lightgray;">
          <tr>
           <td style="width: 30px;">Click</td>
            <td>Name</td>
            <td>Gender</td>
          </tr>  
        </thead>
        <tbody>
          <tr ng-repeat-start="person in result = (people | filter:searchPeople)"> 
                    <td ng-init="person.expanded = !person.expanded">
              <button ng-if="(result.length > 0 && searchPeople) && person.expanded" ng-click="setExpanded(person)">-</button>
              <button ng-if="!(result.length > 0 && searchPeople) || !person.expanded" ng-click="person.expanded = !person.expanded">+</button>
                   </td>
            <td>{{person.name}}</td>
            <td>{{person.gender}}</td>
          </tr>
          <tr ng-if="result.length > 0 && searchPeople && person.expanded" ng-repeat-end="">
            <td colspan="3">{{person.details}}</td>
          </tr>
        </tbody>
      </table>
    </div>

JavaScript

function repeatPeople($scope) {
  $scope.people = [
    {name: "John", gender: "Male", details: "Hi ! I am John and age is 25. I do dance well.",expanded:false},
    {name: "Mary", gender: "Female", details: "Hi ! I am Mary and age is 30. I read books.",expanded:false},
    {name: "Dan", gender: "Male", details: "Hi ! I am Dan and age is 20. I like to play cricket.",expanded:false},
    {name: "Alex", gender: "Male", details: "Hi ! I am Alex and age is 35. I like to watch movies.",expanded:false},
    {name: "Rosy", gender: "Female", details: "Hi ! I am Rosy and age is 25. I play Guitar.",expanded:false}
  ];
 $scope.setExpanded = function(person){
   person.expanded = !person.expanded;
 }

}