JSFiddle - React, Tailwind, and code Playground

by saidulu401

HTML

<div ng-app="sampleApp">
  <div ng-controller="sampleController">
<div ></div>

<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</table>
<hr>
<label>Any: <input ng-model="search.$"></label> <br>
<label>details only <input ng-model="search.details"></label><br>
<label>quantity only <input ng-model="search.quantity"></label><br>
<label>Equality <input type="checkbox" ng-model="strict"></label><br>
<table id="searchObjResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in items | filter:search:strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>
</div>
</div>

JavaScript

angular.module("sampleApp", [])
.controller("sampleController", function($scope) {
$scope.friends = [{name:'John', phone:'555-1276'},
                         {name:'Mary', phone:'800-BIG-MARY'},
                         {name:'Mike', phone:'555-4321'},
                         {name:'Adam', phone:'555-5678'},
                         {name:'Julie', phone:'555-8765'},
                         {name:'Juliette', phone:'555-5678'}];
    $scope.items = [{
      "id": 1,
      "details": "test11",
      "quantity": 2,
      "price": 100
    }, {
      "id": 2,
      "details": "test12",
      "quantity": 5,
      "price": 120
    }, {
      "id": 3,
      "details": "test3",
      "quantity": 6,
      "price": 170
    }, {
      "id": 4,
      "details": "test4",
      "quantity": 8,
      "price": 70
    }, {
      "id": 5,
      "details": "test5",
      "quantity": 2,
      "price": 160
    }, {
      "id": 6,
      "details": "test6",
      "quantity": 9,
      "price": 100
    }]
  });