JSFiddle - React, Tailwind, and code Playground

by enlightenmedia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.js"></script>
<div ng-controller="MyCtrl">
  <md-card ng-repeat="item in items.results ">
     <img ng-src="{{item.img}}" 
          class="md-card-image" 
      alt="" />
          <md-card-content class="content">
              <h2 class="md-title">{{ item.name }}</h2>
              <h4>{{ item.price | currency }}</h4>
              <md-list>
                  <p class="md-subhead">Choose Your Flavor</p>
                  <md-divider></md-divider>
                  <md-list-item ng-repeat="option in options.results" 
                                layout="row">
                      <p> {{ option.name }} </p>
                      <span flex></span>
                      <p> {{ option.price | currency}} </p>
                      <md-checkbox aria-label="option.active"
                                   class="md-accent" 
                                    ng-checked="checkOption(item, option)"
                                   ng-click="addOption(item, option)">
                      </md-checkbox>
                  </md-list-item>
              </md-list>
           </md-card-content>
           <md-action-bar layout="row" 
                          layout-align="end center">
                          <md-button class="md-fab md-accent fab" 
                                     aria-label="Remove From Cart" 
                                     ng-click="remove(item)"                               
                                     ng-class="{active:item.active}">
    ...

SCSS

.md-card-image {
    width:200px;
    height:300px;
}

JavaScript

angular.module('MyApp', ['ngMaterial'])
    .controller('MyCtrl', function ($scope) {
        $scope.items = {};
        
        $scope.options = {};
        $scope.options.results = [{name:'opt1',price:1.22,active:true},
                                  {name:'opt2',price:3.42,active:true}]
        
        $scope.items.results = [{img:'https://placekitten.com/g/200/300',name:'Item 1',price:2.34, flavors:[]},{img:'https://placekitten.com/g/200/300',name:'Item 2',price:2.34, flavors:[]}]
        
        
	
    $scope.addOption = function(item, opt) {
		var index = item.flavors.indexOf(opt);
		if(index > -1) {
			item.flavors.splice(index, 1);
		}
		else
			item.flavors.push(opt);
	}
                
    $scope.checkOption = function(item, opt) {
        return item.flavors.indexOf(option) > -1
    }   
});