JSFiddle - React, Tailwind, and code Playground

by migontech

HTML

<div data-ng-app="market">
    <div data-ng-controller="SomeController">
        <table>
            <tr data-ng-repeat="f in fish">
                <td data-ng-bind="f.name"></td>
                <td><a href="#" data-ng-click="showdetails(f.id)">Details</a></td>
            </tr>
        </table>
        
        <div data-ng-bind="selected">
                        
        </div>
    </div>    
</div>

JavaScript

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

app.filter('getById', function() {
  return function(input, id) {
    var i=0, len=input.length;
    for (; i<len; i++) {
      if (+input[i].id == +id) {
        return input[i];
      }
    }
    return null;
  }
});

app.controller('SomeController', ['$scope', '$filter', function($scope, $filter) {
     $scope.fish = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}]
     
     $scope.showdetails = function(fish_id){
         var found = $filter('getById')($scope.fish, fish_id);
         console.log(found);
         $scope.selected = JSON.stringify(found);
     }
}]);