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 | expandAll:people)">
        <td>
          <button ng-if="person.expanded" ng-click="person.expanded = !person.expanded">-</button>
          <button ng-if="person.expanded == false" ng-click=" person.expanded = !person.expanded">+</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>
</div>

JavaScript

var app = angular.module('app', []);
 
 app.controller('repeatPeople', function($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}];
   
 });
 
 //angular.module('app').filter('expandAll', function() { 
app.filter('expandAll', function() {
  return function(filteredPeople, people) {

      if (filteredPeople.length != people.length){
          for(var person in filteredPeople){
            person.expanded = true;
          }
      }
      else { 
          for(var person in filteredPeople){
            person.expanded = false;
          }
      }
      var output = angular.copy(filteredPeople);
      return output;

  }

});