如何将jQuery翻译成AngularJS(How to translate jQuery to AngularJS)

编程入门行业动态更新时间:2024-10-21 13:33:58

如何执行Angular js 1.x中一个表的多行的数量递增和递减操作，并通过ng-repeat重复行

我有一个jQuery代码，我不知道如何在角度js中实现它。第一个代码是我如何在jQuery中实现它，下一个代码片段是我如何在angular js中实现的，但我不能增加和减少数量。

<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> 
  
 
 
 有角度的js代码  
 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>
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>

                最满意答案
                
                    
                         使用你的Plunker的代码，你需要做一些事情：  
 
  将quantity属性添加到records集合中的对象。  
  在您的控制器中创建两个方法 - 一个增量，一个通过接受记录参数来减少新的quantity属性。  
  使用ng-model为新的quantity属性和两个新的控制器方法连接视图。  
 
 
 
  
  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> 
  
 
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>