JSFiddle - React, Tailwind, and code Playground

by Rob Rothe

HTML

<div ng-app="myApp">

  <section class="section2" ng-controller="itemController">
    <div class="fiqure1" ng-repeat="item in items">

      <img data-ng-src="{{item.src}}" />

    </div>
    <div class="item_style" ng-controller="itemController">
      <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>
      <ul>
      </ul>
    </div>
    <div class="quantity" ng-controller="itemController">
      <ul ng-repeat="item in items">
        <li>{{item.size}}</li>
        <li>
          <input type="text" ng-model="item.qty" size="3">
        </li>
        <li><sup>$</sup>{{item.price}}</li>
      </ul>
    </div>
    <div class="buttons">
      <ul>
        <li><a href="#" ng-click="open(product);">edit</a></li>
        <li><a href="#">remove</a></li>
        <li><a href="#">save for later</a></li>
      </ul>
    </div>
  </section>
</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) {
        return [{
          "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"
        }];
      })
    }
  };
});