ng-click和ng-disabled可以执行“添加到购物车”功能

时间:2016-04-19 14:18:33

标签: jquery angularjs http angularjs-scope shopping-cart

我需要帮助动态启用和禁用我的“添加到购物车”按钮,但是现在一旦我点击“添加到购物车”它不会立即禁用该按钮但我必须点击空白画布才能获得它禁用。

HTML

<div id="shoppingCart">
    <form name="addItemsForm" method="POST">
        <input type="hidden" name="type" value="Package" />
            <ul>
                <li ng-repeat="df in item.delivery_formats">
                    <button type="button" name="addToCartBtn" id="{{df.price_id}}" 
                     value="{{df.price_id}}" class="btn btn-default" ng-model="$parent.addToCartBtn" 
ng-click="addToCart(df.price_id, df);" ng-disabled="checkBtnState(df.button_state)"/> <span class="fa fa-shopping-cart" style="float: left;"></span>  <strong>{{df.delivery_format}} -  ${{df.price}}</strong>

                    </button>
                </li>
            </ul>
    </form>
</div>

Angular&amp; JS

$scope.checkBtnState = function(btn_state){
  if(btn_state == 'disabled') {
    return true;
  }
  else {
    return false;
  }
}
$scope.addToCart = function(id, dfObj){
  $http({
    url: "/shop/add.php",
    method: "POST",
    data: {id: id}
  })
  .success(function(){
    $('#cart').load('/php/cart-items.php');
    dfObj.button_state = 'disabled';
  })
  .error(function(){
    alert('error');
  });
}

1 个答案:

答案 0 :(得分:2)

虽然它非常微不足道 - 把它置于承诺之外。

$scope.addToCart = function(id, dfObj){
    $http({
        url: "/shop/add.php",
        method: "POST",
        data: {id: id}
    }).then(function(){
        $('#cart').load('/php/cart-items.php');           
    })
    .error(function(){
        alert('error');
    });
    dfObj.button_state = 'disabled';
}