JSFiddle - React, Tailwind, and code Playground

by nishant969

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<body ng-controller="productController" ng-app="OnlineShopping">
    <label><b>Select brand:</b>
    </label>
    <select ng-model="selectedBrand" ng-options="b for b in brands"></select>
    <br>
    <br/>
    <table>
        <tr class="header">
            <td>Brand</td>
            <td>Name</td>
            <td>OS</td>
            <td>Price</td>
            <td></td>
            <td></td>
        </tr>
        <tr ng-repeat="product in products | BrandFilter:selectedBrand">
            <td>{{product.Brand}}</td>
            <td>{{product.Name}}</td>
            <td>{{product.OS}}</td>
            <td>{{product.Price}}</td>
            <td>
                <img class="{{product.Status}}" />
            </td>
            <td>
                <div class="add-to-cart" ng-click="addToCart(product)"></div>
            </td>
        </tr>
    </table>
</body>

</html>

CSS

.instock {
	content:url(http://s24.postimg.org/xx9uufb41/in_stock.jpg);
}

.outofstock {
	content:url(http://s24.postimg.org/g8i42szcx/out_of_stock.jpg);
}

.add-to-cart {
	background: url("http://s24.postimg.org/l4lquhzi9/add_to_cart.jpg") no-repeat;
	width: 55px;
	height: 45px;
	cursor: pointer;
}

table {
	border: 1px solid black;
}

tr.header{
	color: navy;
	background-color: #e5e4e7;
}

td {
padding: 10px;
text-align: center;
}

JavaScript

var onlineShopping = angular.module('OnlineShopping', []);

onlineShopping.controller('productController', function($scope){
    $scope.brands = ['All', 'Samsung', 'Apple', 'BlackBerry'];
    $scope.selectedBrand = $scope.brands[0];
      $scope.products = [
  		{Brand: 'Samsung', Name:'S3', OS:'Android 4.0', Price: '$150', Status: 'instock'},
  		{Brand: 'Samsung', Name:'S2', OS:'Android 2.3.3', Price: '$80', Status: 'outofstock'},
  		{Brand: 'Apple', Name:'iPhone 5', OS:'iOS 6', Price: '$200', Status: 'outofstock'},
  		{Brand: 'Apple', Name:'iPhone 4S', OS:'iOS 5', Price: '$100', Status: 'instock'},
  		{Brand: 'BlackBerry', Name:'Z10', OS:'BlackBerry 10', Price: '$150', Status: 'instock'}
  ];

  $scope.addToCart = function(product)
  {
  	if(product.Status == 'outofstock')
  		alert('Product is out of stock now.');
    else
      alert('Product has been added to your cart.');
  }

});

onlineShopping.filter('BrandFilter', function () {

	 return function( products, brand ) {
      if(brand == 'All')
      {
        return products;
      }
      else
      {
        var filtered = [];
        angular.forEach(products, function(product) {
          if( product.Brand == brand ) {
            filtered.push(product);
          }
        });
        return filtered;
      }
    };

});