JSFiddle - React, Tailwind, and code Playground

by dulcedilip

HTML

<div  ng-app="sampleApp" ng-controller="TestController"> 
             <div  ng-repeat="item in model.TestList">
                <p>Name :</p> {{item.name}}              
          <div>
            <img alt="no-img" ng-click="showDetail2(item.name)"/>
             <h3 class="title" ng-click="showDetail2(1242)">{{item.name}}</h3>
        </div>
             </div>    
      
    </div>

JavaScript

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

app.factory('TestService', function ($http, $q) {
    
    return ({
        getItems : getItems 
    });
    
    function getItems(){

        var request =[{"_id":"53f4cde40864fca70c2434cf","name":"John Smith"},
                 {"_id":"23f4bde40864fba70c2434cf","name":"Smith John"},
                 {"_id":"592f4cde40864fca70c2434cf","name":"Albert Test"}];

        return( request);
    }

    function handleError( response ) {

        if (! angular.isObject( response.data ) ||! response.data.message) {
 
            return( $q.reject( "An unknown error occurred." ) ); 
        }          
        return( $q.reject( response.data.message ) ); 
    }

    function handleSuccess( response ) { 
        return( response.data ); 
    }

    
});

app.controller('TestController', ['$scope', 'TestService', function ($scope, TestService) {

    $scope.model= [];
    $scope.model.TestList= [];
    
    loadRemoteData();

    function loadRemoteData(){
 $scope.model.TestList= TestService.getItems();
    }
     function abc(val){
        alert('hi '+val);
    }
 $scope.showDetail2 = abc;

}]);