JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<script src="https://code.angularjs.org/1.6.6/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div ng-app="myApp">
<div ng-controller="MyCtrl">
  <div class="">
    <div class="col-12">
      <label>Filter</label>
    </div>
    <div class="col-12">
      <input class="form-control" ng-model="filter" />
    </div>
  </div>
  <div class="col-12">
  <table style="width: 100%;">
  <thead>
    <tr>
      <th>first name</th>
      <th>last name</th>
      <th>login</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in items">
      <td ng-bind="item.firstName"></td>
      <td ng-bind="item.lastName"></td>
      <td ng-bind="item.login"></td>
    </tr>
  </tbody>
  </table>
  </div>
  <br />
</div>
</div>

JavaScript

var myApp = angular.module('myApp', []);



var MyCtrl = myApp.controller('MyCtrl', function MyCtrl($scope) {
    var source = [
      {firstName:"Ivan", lastName:"Ivanov", login:"IIv"},
      {firstName:"Dima", lastName:"Ivanov", login:"IDim"},
      {firstName:"Petr", lastName:"Ivanov", login:"IPet"},
      {firstName:"Petr", lastName:"Petrov", login:"PPet"},
      {firstName:"Dima", lastName:"Sidorov", login:"SDim"}
    ];
    $scope.filter = '';
    $scope.items = source;
    
    $scope.add = function () {
      $scope.items.push(emptyItem());
    }
    
    $scope.$watch( 'filter', ( n,v ) => 
      ( n != v ) ? 
        $scope.items = source.filter(
          item => Object.values( item ).some( 
            prop => prop.toLowerCase().indexOf( n.toLowerCase() ) !== -1
          ) 
        )
     :
        void( 0 )
    );
});