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>id</th><th>details</th><th>quantity</th><th>price</th><th>Total</th></tr>
  <tr ng-repeat="friendObj in resultValue=(items | filter:search:strict) ">
    <td>{{friendObj.id}}</td>
    <td>{{friendObj.details}}</td>
    <td>{{friendObj.quantity}}</td>
    <td>{{friendObj.price}}</td>
    <td>{{friendObj.price * friendObj.quantity}}</td>
  </tr>
  <tr>
  
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>{{resultValue | sumOfValue:'quantity'}}</td>
    <td>{{resultValue | sumOfValue:'price'}}</td>
    <td>{{resultValue | totalSumPriceQty:'quantity':'price'}}</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
    }]
  })
  .filter('sumOfValue', function() {
    return function(data, key) {
      debugger;
      if (angular.isUndefined(data) || angular.isUndefined(key))
        return 0;
      var sum = 0;

      angular.forEach(data, function(v, k) {
        sum = sum + parseInt(v[key]);
      });
      return sum;
    }
  }).filter('totalSumPriceQty', function() {
    return function(data, key1, key2) {
      if (angular.isUndefined(data) || angular.isUndefined(key1) || angular.isUndefined(key2))
        return 0;

      var sum = 0;
      angular.forEach(data, function(v, k) {
        sum = sum + (parseInt(v[key1]) * parseInt(v[key2]));
      });
      return sum;
    }
  });