JSFiddle - React, Tailwind, and code Playground

by Krzysztof Safjanowski

HTML

<div ng-app='exampleApp'>
  <div ng-controller='defaultCtrl'>
    <button ng-click="incrementPrices()">
      Change Prices
    </button>
    <div unordered-list="products" list-property='price | currency'></div>
  </div>
</div>

JavaScript

angular.module('exampleApp', [])
  .controller('defaultCtrl', function($scope) {
    $scope.products = [{
      name: "Apples",
      category: "Fruit",
      price: 1.20,
      expiry: 10
    }, {
      name: "Bananas",
      category: "Fruit",
      price: 2.42,
      expiry: 7
    }, {
      name: "Pears",
      category: "Fruit",
      price: 2.02,
      expiry: 6
    }];

    $scope.incrementPrices = function() {
      $scope.products = $scope.products.map(function(product) {
        product.price += 0.1
        return product;
      })
      
      console.log($scope.products)
    }
  })
  .directive("unorderedList", function() {
    return function(scope, element, attrs) {
      var data = scope[attrs["unorderedList"]];
      var propertyExpression = attrs["listProperty"];

      if (angular.isArray(data)) {
        var listElem = angular.element("<ul>");
        element.append(listElem);
        for (var i = 0; i < data.length; i++) {
          (function(index) {
            var itemElement = angular.element('<li>');
            listElem.append(itemElement);
            var watcherFn = function(watchScope) {
              return watchScope.$eval(propertyExpression, data[index]);
            }
            scope.$watch(watcherFn, function(newValue, oldValue) {
              itemElement.text(newValue);
            });
          }(i));
        }
      }
    }
  })