JSFiddle - React, Tailwind, and code Playground

by qhoc

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>
            <tr>
                <td>Fail case</td>
                <td><a href="#" data-ng-click="showdetails(-1)">Details</a></td>
            </tr>
        </table>
        
        <div data-ng-bind="selected">
                        
        </div>
        {{ one }}
        {{ foundIndex }}
        {{ test }}
    </div>    
</div>

JavaScript

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

app.controller('SomeController', ['$scope', '$filter', function($scope, $filter) {
     $scope.fish = [{category:'freshwater', id:'1', name: 'trout', more:'false'}, {category:'freshwater', id:'10', name: 'trout', more:'false'}, {category:'freshwater', id:'2', name:'bass', more:'false'}];
     
     $scope.showdetails = function(fish_id) {
         var found = $filter('filter')($scope.fish, {id: fish_id}, true);
         if (found.length) {
             $scope.selected = JSON.stringify(found[0]);
         } else {
             $scope.selected = 'Not found';
         }
     }
     
     $scope.one = $filter('filter')($scope.fish, {category:'freshwater', id:'10', name: 'trout', more:'false'}, true).length > 0;
           
    var obj = {category:'freshwater', id:'10', name: 'trout', more:'false'};
          $scope.foundIndex = -1;
      for (var i=0; i<$scope.fish.length; i++) {
          if ($scope.foundIndex < 0)
        $scope.foundIndex = angular.equals($scope.fish[i], obj) ? i : -1;
          console.log($scope.foundIndex);
      }
    
    $scope.test = angular.equals($scope.fish[1], obj)
}]);