当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Dynamically change a tag content on click

问题描述:

I am trying to change value of subtotal field dynamically using angular js. I am stucked at a point. When I click on a Remove it removes the particular field using jquery.

On removing the a particular item the subtotal value should also change. How to achieve this?

Here is code which I tried.

Html file-

<div data-ng-app="myApp" ng-controller="CalController" id="parentContainer">

<div class="itemsQuantity" data-id="">

<span>Remove &nbsp;</span>

Qty: <input ng-model="firstItem" type="text" ng-change="calculateFirst()"/>

<div id="productOne"> Rs {{firstCalculation}} </div>

</div>

<div class="itemsQuantity" data-id="">

<span>Remove &nbsp;</span>

Qty: <input ng-model="secondItem" type="text" ng-change="calculateSecond()" />

<div id="productTwo"> Rs {{secondCalculation}} </div>

</div>

<div class="itemsQuantity" data-id="">

<span>Remove &nbsp;</span>

Qty: <input ng-model="thirdItem" type="text" ng-change="calculateThird()"/>

<div id="productThree"> Rs {{thirdCalculation}} </div>

</div>

<!-- Subtotal -->

<div>

Subtotal:

<p id="finalPrice">Rs {{firstCalculation + secondCalculation + thirdCalculation}}</p>

</div>

</div>

Js File

$j = jQuery.noConflict();

$j.getJSON("https://api.myjson.com/bins/41hjl",function(response){

var availableSections = $j(".itemsQuantity");

for(i=0; i<response.product_id_count.length; i++){

$j(availableSections[i]).attr("data-id",response.product_id_count[i]);

}

});

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

myApp.controller('CalController', ['$scope', function($scope) {

$scope.firstCalculation = 200;

$scope.secondCalculation = 400;

$scope.thirdCalculation = 600;

$scope.calculateFirst = function() {

$scope.firstCalculation = $scope.firstItem*200;

};

$scope.calculateSecond = function() {

$scope.secondCalculation = $scope.secondItem*400;

};

$scope.calculateThird = function() {

$scope.thirdCalculation = $scope.thirdItem*600;

};

$j(".itemsQuantity span").on('click',function(){

var removeProduct = $j(this).parent().attr("data-id");

$j(this).parent().remove();

});

}])

网友答案:

Here is an Angular Plunker example using a filter without the use of jQuery.

Your HTML:

   <table style="width:100%">
  <tr ng-repeat="i in cartItems">
    <td>{{i.name}}</td>
    <td><button type="button" ng-click="removeItem(i)">Remove</button></td>
    <td>{{i.quantity}}</td>
    <td>{{i.price}}</td>
    <td>{{i.price * i.quantity}}</td>
  </tr>
  <tr>
    <td>Total:</td>
    <td>{{cartItems | totalSumPriceQty: 'quantity':'price'}}</td>
  </tr>
</table>

Your js:

 $scope.removeItem = function(item){
      var idx = $scope.cartItems.indexOf(item);
      $scope.cartItems.splice(idx, 1);

    }

});

app.filter('totalSumPriceQty', function () {
    return function (data, key1, key2) {        
        if (angular.isUndefined(data) && angular.isUndefined(key1)  && angular.isUndefined(key2)) 
            return 0;        
        var sum = 0;
        angular.forEach(data,function(value){
            sum = sum + (parseInt(value[key1]) * parseInt(value[key2]));
        });
        return sum;
    }
})
分享给朋友:
您可能感兴趣的文章:
随机阅读: