How to translate jQuery to AngularJS

Question

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>

Possible duplicate of [“Thinking in AngularJS” if I have a jQuery background?](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background). — georgeawg, May 24 '18 at 19:01

score 1 · Accepted Answer · edited May 24 '18 at 22:36

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

Add a quantity property to the objects in your records collection.
Create two methods in your controller - one that increments and one that decrements the new quantity property by accepting a record parameter.
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>

Thanks Very much for your help – Sherin Green May 25 '18 at 10:42 — Sherin Green, May 25 '18 at 10:42

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

1 Answers1