JSFiddle - React, Tailwind, and code Playground

by Rob Rothe

HTML

<div ng-app="myApp">
  <div class="item_style" ng-controller="itemController">
    {{ items }}
    <ul ng-repeat="item in items">
      <li>{{item.itemname}}</li>
      <li>Style #: {{item.style}}</li>
      <li>Colour: {{item.colour}}</li>
      <li>Size: {{item.size}}</li>
      <li>QTY:
        <input type="text" size="3">
      </li>
      <li><sup>$</sup>{{item.price}}</li>
    </ul>
  </div>
</div>

JavaScript

var app = angular.module("myApp", []);
app.controller('itemController', function($scope, Data) {
  Data.list().then(function(response) {
    $scope.items = response;
  });
});

app.factory('Data', function($http) {

  return {
    list: function() {
      //return $http.get('data.json');
      return $http.get('https://api.zippopotam.us/us/90210').success(function(response) {
        var response = [{
          "src": "img/T1.jpg",
          "itemname": "solid green cotton tshirt",
          "style": "MS13KT1906",
          "colour": "Blue",
          "size": "s",
          "qty": "1",
          "price": "11.00"
        }, {
          "src": "img/T2.jpg",
          "itemname": "cotton tshirt",
          "style": "MS13KT1906",
          "colour": "Green",
          "size": "s",
          "qty": "1",
          "price": "11.00"
        }];
        
        return response;
      });
    }
  };
});