CODEWITHSUNDEEP
javascriptjqueryangularjs
Sherin Green
Sherin Green

Reputation: 358

How to translate jQuery to AngularJS

How to perform Quantity increment and decrements operation of multiple rows of a table in Angular js 1.x and rows are repeated by ng-repeat

I have a jQuery code and i don't know how to implement it in angular js. The First code is how I implement it in jQuery and next code snippet is how I implement in in angular js but i can not increment and decrement the quantity.

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous">
</script>

<script>

	$(".addqt").click(function() {

	var $row = $(this).closest("tr");// Find the row
	var $quantity= $row.find(".qun").val();
	var new_quantity=parseInt($quantity)+1;
	$row.find(".qun").val(new_quantity);

   });


	$(".subqt").click(function() {

	var $row = $(this).closest("tr");// Find the row
	var $quantity= $row.find(".qun").val();
	var new_quantity=parseInt($quantity)-1;
	$row.find(".qun").val(new_quantity);// Find the text box near subtract buuton and assign new value

   });

</script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<table border="box">

	<tr>
		<th>Part No</th>
		<th>Price</th>
		<th>Quantity</th>
	</tr> 

	<tr>
		<td>ZB80900259</td>
		<td>619.74</td>
		<td>
			<button  id="neen" class='btn btn-success addqt'>+</button>
			<input readonly type='text' class='qun text-center' value='0' style='width:30px;height:34px;'>
			<button   id="geen"  class='btn btn-danger subqt'>-</button>
		</td>
	</tr>

	<tr>
		<td>Z80098330</td>
		<td>230.00</td>
		<td>
			<button  id="neen" class='btn btn-success addqt'>+</button>
			<input readonly type='text' class='qun text-center' value='0' style='width:30px;height:34px;'>
			<button  id="geen"  class='btn btn-danger subqt'>-</button>
		</td>
	</tr>

</table>


</html>

Angular js code

https://plnkr.co/edit/o4CJr5P696NdpP66Qkxh?p=preview

<tr ng-repeat="rec in records">
    <td>{{rec.partno}}</td>
    <td>{{rec.price}}</td>
    <td>
        <button  id="neen" class='btn btn-success addqt'>+</button>
        <input readonly type='text' class='qun text-center' value='0' style='width:30px;height:34px;'>
        <button   id="geen"  class='btn btn-danger subqt'>-</button>
    </td>
</tr>

Upvotes: 0

Views: 260

Answers (1)

Lex
Lex

Reputation: 7194

Using the code from your Plunker, there are a few things you need to do:

  1. Add a quantity property to the objects in your records collection.
  2. Create two methods in your controller - one that increments and one that decrements the new quantity property by accepting a record parameter.
  3. Wire up the view with an ng-model for the new quantity property and the two new controller methods.

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [{
      "partno": "ZB80900259",
      "price": "619.74",
      "quantity": 0
    },
    {
      "partno": "Z80098330",
      "price": "230.00",
      "quantity": 0
    }
  ];

  $scope.increaseQty = (rec) => {
    rec.quantity++;
  };

  $scope.decreaseQty = (rec) => {
    rec.quantity--;
    if (rec.quantity < 0) rec.quantity = 0;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table border="box">
    <tr>
      <th>Part No</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
    <tr ng-repeat="rec in records">
      <td>{{rec.partno}}</td>
      <td>{{rec.price}}</td>
      <td>
        <button id="neen{{$index}}" 
                class='btn btn-success addqt' 
                ng-click="increaseQty(rec)">+</button>
        <input readonly 
               type='text' 
               class='qun text-center' 
               style='width:30px;height:34px;' 
               ng-model="rec.quantity">
        <button id="geen{{$index}}" 
                class='btn btn-danger subqt' 
                ng-click="decreaseQty(rec)">-</button>
      </td>
    </tr>
  </table>
</div>

Upvotes: 1

Related Questions