JSFiddle - React, Tailwind, and code Playground

by Anderson Madeira

HTML

<p class="text-center" ng-controller="prodCtrl as vm">
  <div class="text-center" id="top-loading-spinner" ng-show="global_loading">
    <div class="spinner" style="display: inline-table">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>
  &nbsp;&nbsp; Carregando
  </div>
  <div class="text-center" ng-cloak>
    <input id="pcheck" type="checkbox" ng-model="in_cart" > Check Me!
    <!--<input type="checkbox" ng-model="product.in_cart"> Marca-->
    <!--<button class="btn btn-primary" ng-click="onToggleClicked()" href="#?"><i class='fa fa-shopping-cart'></i> Adicionar ao carrinho</button>
                                              <input class="form-control" id="btn_cart_item_toggle" data-toggle="toggle" type="checkbox"

                                                     ng-model="in_cart"
                                                     data-width="270" data-offstyle="" data-on="" data-off="" width="200" data-style="slow"/>

                                              <input class="form-control" id="count-item" ng-show="vm.in_cart" type="number" min="1" data-pid="{{ Shortids::encode($produto->idProduto) }}" value="{{ $produto_count }}">
                                              -->
                                              <a href="" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Adicionar a lista de desejos"><i class="fa fa-heart-o"></i></a>

                                            </div>

                                        </p>

JavaScript

app.controller('prodCtrl', function($scope, $http, $localStorage, pid) {
  var vm = this;
  vm.in_cart = false;

  $scope.$watch('in_cart', function(current, original) {
    console.log('old: ' + original + ' new: ' + current);

    if (current === true)
      vm.addToCart();
    else if (current === false)
      vm.removeFromCart();
  });

  vm.addToCart = function () {
    $http.post(ROOT_URL+'api/cart/add', { id: pid })
      .success(function (response) {
        if (response.success) {
          vm.in_cart = true;
          console.log('vm.in_cart: ' +vm.in_cart);
        }

        bootbox.alert('Step1: ' + response.message);
      }).error(function () {
        vm.in_cart = false;
        console.log('vm.in_cart: ' +vm.in_cart);
        bootbox.alert('Step2: ' + response.message);
      });
  };

  vm.removeFromCart = function () {
    $http.post(ROOT_URL+'api/cart/remove', { id: pid })
      .success(function (response) {
        if (response.success) {
          vm.in_cart = false;
          console.log('vm.in_cart: ' +vm.in_cart);
        }

        bootbox.alert('Step3: ' + response.message);
      }).error(function () {
        bootbox.alert('Step4: ' + response.message);
      });
  };

  (function () {
    $http.post(ROOT_URL+'api/cart/get', { id: pid })
      .success(function (response) {
        if (response.success) {
          vm.in_cart = true;
          $('#pcheck').prop('checked', true);
          //$scope.in_cart = true;
          console.log('In cart');
        } else {
         //$scope.product.in_cart = false;
          $('#pcheck').prop('checked', false);
          vm.in_cart = false;
         // $scope.in_cart = false;
          console.log('Not in cart');
        }
      }).error(function () {
        //$scope.product.in_cart = false;
        $('#pcheck').prop('checked', false);
        vm.in_cart = false;
      //  $scope.in_cart = false;
        console.log('error request');
      });
  })();
});