Как перевести jQuery на AngularJS - PullRequest
Новая
       4

Как перевести jQuery на AngularJS

0 голосов
/ 24 мая 2018

Как выполнить операцию увеличения и уменьшения количества нескольких строк таблицы в Angular js 1.x, а строки повторяются с помощью ng-repeat

У меня есть код jQuery, и я не знаю, какреализовать его в угловых JS.Первый код - это то, как я реализую его в jQuery, а следующий фрагмент кода - то, как я реализую его в угловых 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>

1 Ответ

0 голосов
/ 24 мая 2018

Используя код из вашего Plunker, вам нужно сделать несколько вещей:

  1. Добавить свойство quantity к объектам в вашей коллекции records.
  2. Создайте в вашем контроллере два метода - один, который увеличивает значение, а другой - уменьшает новое свойство quantity, принимая параметр записи.
  3. Соедините представление с 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...