/ / Jak podsumować wartości przy użyciu AngularJS i HTML tabeli? - angularjs

Jak podsumować wartości za pomocą AngularJS i HTML tabeli? - angularjs

Oto scenariusz:

  1. Jedna tabela z 5 rzędami.
  2. Wiersz 1 - wyświetla całkowity zakup.
  3. Rząd 2 - wyświetla całkowity zakup owoców.
  4. Rząd 3 - wyświetla całkowity zakup warzyw.
  5. Wiersz 4 - Jest to stół z owocami, generowany dynamicznie za pomocą php.
  6. Rząd 5 - Czy stół warzywny z warzywem n, wygenerowany dynamicznie za pomocą php.

Jak widać w linku fiddle, użytkownik musi wybrać ilość konkretnego produktu, aby ostateczna cena tego produktu była aktualizowana, a także cena całkowita i grupowa.

Mogłem to zrobić za pomocą jquery, ale chciałbym wykonać to zadanie za pomocą AngularJs.

Zacząłem kodować, ale do tej pory mam jedną kwestię $NaN w całej linii produktów.

  1. A więc, jak tego uniknąć $NaN kiedy nie ma nic w ilości?
  2. Jak połączyć 3 pola sumaryczne z każdą poszczególną grupą produktów?

Uwaga. Podejście, którego użyłem, nie jest najlepsze. Zapraszam do zmiany podejścia.
Jakieś sugestie? JSFIDDLE

<table style="width:100% ;border: 2px solid #00BABF;" ng-app="">
<tr>
<td>Total: $<span id="total"></span></td>
</tr>

<tr>
<td>Fruit: $<span id="tot_fruit"></span></td>
</tr>

<tr>
<td>Veget: $<span id="tot_veget"></span></td>
</tr>


<tr id="fruits">
<td>
<table id="tbl_fruits" style="width:100% ;border: 2px solid red;">
<tr>
<th style=" padding: 10px;  text-align: left;">Name</th>
<th style=" padding: 10px;  text-align: left;">Quanty</th>
<th style=" padding: 10px;  text-align: left;">Price</th>
<th style=" padding: 10px;  text-align: left;">Total</th>
</tr>
<tr id="Fruit_1ID">
<td class="name">Fruit_1</td>
<td><input id="qty_Fruit_1ID" ng-model="Fruit_1ID"></td>
<td>$<span id="price_Fruit_1ID">10</span></td>
<td>$<span id="tot_Fruit_1ID">{{Fruit_1ID*10}}</span></td>
</tr>
<tr id="Fruit_nID">
<td class="name">Fruit_n</td>
<td><input id="qty_Fruit_nID" ng-model="Fruit_nID"></td>
<td>$<span id="price_Fruit_nID">5</span></td>
<td>$<span id="tot_Fruit_nID">{{Fruit_nID*5}}</span></td>
</tr>
</table>
</td>
</tr>

<tr id="vegetable">
<td>
<table id="tbl_vegetabl" style="width:100% ;border: 2px solid green;">
<tr>
<th style=" padding: 10px;  text-align: left;">Name</th>
<th style=" padding: 10px;  text-align: left;">Quanty</th>
<th style=" padding: 10px;  text-align: left;">Price</th>
<th style=" padding: 10px;  text-align: left;">Total</th>
</tr>
<tr id="Vegetab_1ID">
<td class="name">Vegetab_1</td>
<td><input id="qty_Vegetab_1ID" ng-model="Vegetab_1ID"></td>
<td>$<span id="price_Vegetab_1ID">7</span></td>
<td>$<span id="tot_Vegetab_1ID">{{Vegetab_1ID*7}}</span></td>
</tr>
<tr id="Vegetab_nID">
<td class="name">Vegetab_n</td>
<td><input id="qty_Vegetab_nID" ng-model="Vegetab_nID"></td>
<td>$<span id="price_Vegetab_nID">3</span></td>
<td>$<span id="tot_Vegetab_nID">{{Vegetab_nID*3}}</span></td>
</tr>
</table>
</td>
</tr>

</table>

Odpowiedzi:

3 dla odpowiedzi № 1

A więc, jak uniknąć wyświetlania tego $ NaN, gdy nie ma nic w ilości? Jak połączyć 3 pola sumaryczne z każdą poszczególną grupą produktów?

  • Możesz po prostu użyć podwójnego pionowego ukośnika || aby uniknąć sytuacji kiedy twoje wyrażenie ocenia jako NaN.
  • Tak samo jak powyżej. Ale zdecydowanie powinieneś używać kontrolera i przenosić całą logikę tam, a nawet do usług. Link do JsFiddle Myślę, że dobrym rozwiązaniem jest przechowywanie ceny za każdą żywność w zmiennej lub nawet jako stałej.