Poniższy skrypt wyświetla koszyk sklepu przy użyciu ng-repeat
. Dla każdego elementu w tablicy pokazuje nazwę pozycji, jej kwotę i sumę częściową (product.price * product.quantity
).
Jaki jest najprostszy sposób obliczenia łącznej ceny powtarzanych elementów?
<table>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr ng-repeat="product in cart.products">
<td>{{product.name}}</td>
<td>{{product.quantity}}</td>
<td>{{product.price * product.quantity}} €</td>
</tr>
<tr>
<td></td>
<td>Total :</td>
<td></td> <!-- Here is the total value of my cart -->
</tr>
</table>
angularjs
angularjs-ng-repeat
keepthepeach
źródło
źródło
Odpowiedzi:
W szablonie
W kontrolerze
źródło
Działa to również zarówno na filtrze, jak i na liście normalnej. W pierwszej kolejności należy utworzyć nowy filtr dla sumy wszystkich wartości z listy, a także podane rozwiązanie dla sumy ilości całkowitej. W szczegółowym kodzie sprawdź link Fiddler .
sprawdź ten link Fiddle
źródło
'undefined'
podczas używaniaresultValue
, ale jeśli używamitems
, działa dobrze, jakieś pomysły .. ??items
go użyję, nie zadziała z filtrami, pomóż!ng-repeat="campaign in filteredCampaigns=(campaigns | filter:{'name':q})"
i{{ filteredCampaigns | campaignTotal: 'totalCommission' | number: 2 }}
Zdając sobie sprawę z tego odpowiedział dawno temu, ale chciałem opublikować inne podejście, które nie zostało przedstawione ...
Służy
ng-init
do obliczania sumy. W ten sposób nie musisz iterować w kodzie HTML i iterować w kontrolerze. W tym scenariuszu myślę, że jest to czystsze / prostsze rozwiązanie. (Jeśli logika liczenia byłaby bardziej złożona, zdecydowanie zalecałbym przeniesienie logiki do kontrolera lub usługi, w zależności od potrzeb).Oczywiście w kontrolerze po prostu zdefiniuj / zainicjuj swoje
Total
pole:źródło
Możesz obliczyć sumę wewnątrz
ng-repeat
follow:Sprawdź wynik tutaj: http://plnkr.co/edit/Gb8XiCf2RWiozFI3xWzp?p=preview
W przypadku wyniku automatycznej aktualizacji: http://plnkr.co/edit/QSxYbgjDjkuSH2s5JBPf?p=preview (dzięki - VicJordan)
źródło
tbody
jest inicjowana tylko raz, ale zatr
każdym razem, gdy lista jest filtrowana, co skutkuje niepoprawną sumą$scope
To jest moje rozwiązanie
słodki i prosty filtr niestandardowy:
(ale tylko w odniesieniu do prostej sumy wartości, a nie iloczynu sumarycznego, stworzyłem
sumProduct
filtr i dołączyłem go jako edit do tego postu).JS Fiddle
EDYCJA: sumProduct
To jest
sumProduct
filtr, akceptuje dowolną liczbę argumentów. Jako argument przyjmuje nazwę właściwości z danych wejściowych i może obsługiwać zagnieżdżoną właściwość (zagnieżdżenie zaznaczone kropką:)property.nested
;oto JS Fiddle i kod
JS Fiddle
źródło
Proste rozwiązanie
Oto proste rozwiązanie. Nie jest wymagana dodatkowa pętla.
Część HTML
Część skryptowa
źródło
Inny sposób rozwiązania tego problemu, począwszy od odpowiedzi Wacława na rozwiązanie tego konkretnego obliczenia - tj. Obliczenia w każdym wierszu.
Aby to zrobić z obliczeniem, po prostu dodaj funkcję obliczeniową do swojego zakresu, np
Użyłbyś
{{ datas|total:calcItemTotal|currency }}
w swoim kodzie HTML. Ma to tę zaletę, że nie jest wywoływane przy każdym podsumowaniu, ponieważ używa filtrów i może być używane do prostych lub złożonych podsumowań.JSFiddle
źródło
Jest to prosty sposób na zrobienie tego za pomocą ng-repeat i ng-init, aby zagregować wszystkie wartości i rozszerzyć model o właściwość item.total.
Dyrektywa ngInit wywołuje funkcję set total dla każdego elementu. Funkcja setTotals w kontrolerze oblicza sumę każdej pozycji. Wykorzystuje również zmienne zakresu faktura_konto i suma_ faktury do agregowania (sumowania) ilości i sumy wszystkich towarów.
więcej informacji i demo znajdziesz pod tym linkiem:
http://www.ozkary.com/2015/06/angularjs-calculate-totals-using.html
źródło
Preferuję eleganckie rozwiązania
W szablonie
W kontrolerze
Jeśli używasz ES2015 (aka ES6)
źródło
Możesz użyć niestandardowego filtru kątowego, który pobiera tablicę obiektów zestawu danych i klucz w każdym obiekcie do zsumowania. Filtr może następnie zwrócić sumę:
Następnie w swojej tabeli, aby zsumować kolumnę, której możesz użyć:
źródło
Możesz spróbować skorzystać z usług angular js, zadziałało to dla mnie… przekazując fragmenty kodu poniżej
Kod kontrolera:
Kod serwisowy:
źródło
oto moje rozwiązanie tego problemu:
scenariusz
Redukcja zostanie wykonana dla każdego produktu w tablicy products. Akumulator to całkowita skumulowana kwota, currentValue to bieżący element tablicy, a 0 w ostatnim jest wartością początkową
źródło
Rozszerzyłem nieco odpowiedź RajaShilpy. Możesz użyć składni takiej jak:
abyś mógł uzyskać dostęp do obiektu potomnego obiektu. Oto kod filtru:
źródło
Przyjmując odpowiedź Vaclava i czyniąc ją bardziej podobną do Angulara:
Daje to korzyść z uzyskania nawet dostępu do danych zagnieżdżonych i tablicowych:
źródło
W html
w javascript
źródło
Odpowiedź Huy Nguyena jest już prawie gotowa. Aby to zadziałało, dodaj:
... do linii z ng-init. Lista zawsze zawiera jedną pozycję, więc Angular powtórzy blok dokładnie raz.
Demo Zybnek używające filtrowania można uruchomić, dodając:
Zobacz http://plnkr.co/edit/dLSntiy8EyahZ0upDpgy?p=preview .
źródło
źródło
To jest moje rozwiązanie
Wymaga dodania nazwy do kontrolera jako
Controller as SomeName
, abyśmy mogli tam buforować zmienną (czy to naprawdę wymaga? Nie znam się na używaniu $ parent, więc nie wiem)Następnie dla każdego powtórzenia dodaj
ng-init"SomeName.SumVariable = ($first ? 0 : SomeName.SumVariable) + repeatValue"
$first
aby sprawdzić, czy jest najpierw, a następnie resetuje się do zera, w przeciwnym razie kontynuowałaby wartość zagregowanąhttp://jsfiddle.net/thainayu/harcv74f/
źródło
Po przeczytaniu wszystkich odpowiedzi tutaj - jak podsumować zgrupowane informacje, postanowiłem pominąć to wszystko i po prostu załadowałem jedną z bibliotek javascript SQL. Używam alasql, tak, ładowanie trwa kilka sekund dłużej, ale oszczędza niezliczoną ilość czasu na kodowaniu i debugowaniu, teraz grupowanie i sumowanie () Po prostu używam,
Wiem, że brzmi to trochę jak rant na temat angular / js, ale tak naprawdę SQL rozwiązał ten problem ponad 30 lat temu i nie powinniśmy być zmuszeni do ponownego wymyślania tego w przeglądarce.
źródło