Próbuję napisać funkcję, która pozwala mi usunąć element po kliknięciu przycisku, ale myślę, że mylę się z funkcją - czy używam $digest
?
HTML i app.js:
<ul ng-repeat="bday in bdays">
<li>
<span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
<a class="btn" ng-click="remove()">Delete</a>
</form>
</li>
</ul>
$scope.remove = function(){
$scope.newBirthday = $scope.$digest();
};
remove()
wng-click
drodze masz to ma kontekst. Potrzebujesz więcej szczegółów w znacznikach, aby pokazać, co jest usuwane i czy jest wng-repeat
remove()
Odpowiedzi:
Aby usunąć element, musisz usunąć go z tablicy i przekazać
bday
element do funkcji usuwania w znacznikach. Następnie w kontrolerze sprawdź indeks elementu i usuń go z tablicyNastępnie w kontrolerze:
Angular automatycznie wykryje zmianę w
bdays
tablicy i dokona aktualizacjing-repeat
DEMO: http://plnkr.co/edit/ZdShIA?p=preview
EDYCJA: Jeśli przeprowadzanie aktualizacji na żywo za pomocą serwera będzie korzystało z usługi utworzonej za pomocą
$resource
do zarządzania aktualizacjami macierzy w tym samym czasie, gdy aktualizuje serwerźródło
$index
bezpośrednio może generować błędy, jeśli twoja lista jest filtrowana według szablonu. To jest szablon; bezpieczniej jestng-click='remove(bday)'
wtedy używaćarr.splice(arr.indexOf(bday),1);
this is undefined
. Może Plunker / jsfiddle?.indexOf(item)
zwróci -1, jeśli nie zostanie znaleziony, może to spowodować usunięcie elementu na końcu tablicy, jeśli go nie zaznaczysz.To poprawna odpowiedź:
W odpowiedzi @ charlietfl. Myślę, że to źle, ponieważ podajesz
$index
jako parametr, ale zamiast tego używasz życzenia w kontrolerze. Popraw mnie, jeśli się mylę :)źródło
indexOf
Działa TYLKO, jeśli jest to IE9 +Jeśli jesteś w powtórzeniu ng
możesz użyć opcji jednej linijki
$index
jest używany przez angular, aby pokazać aktualny indeks tablicy wewnątrzng-repeat
źródło
Używanie
$index
działa doskonale w podstawowych przypadkach, a odpowiedź @ charlietfl jest świetna. Ale czasami$index
to nie wystarczy.Wyobraź sobie, że masz jedną tablicę, którą prezentujesz w dwóch różnych powtórzeniach ng. Jeden z powtórzeń ng jest filtrowany pod kątem obiektów, które mają prawdziwą właściwość, a drugi jest filtrowany pod kątem właściwości fałsz. Prezentowane są dwie różne tablice filtrowane, które pochodzą z pojedynczej oryginalnej tablicy. (Lub, jeśli to pomaga w wizualizacji: być może masz jedną grupę ludzi i chcesz jedno powtórzenie ng dla kobiet w tej tablicy, a drugie dla mężczyzn w tej samej tablicy .) Twój cel: niezawodne usunięcie z oryginalna tablica, wykorzystująca informacje od członków filtrowanych tablic.
W każdej z tych filtrowanych tablic $ index nie będzie indeksem elementu w oryginalnej tablicy. Będzie to indeks w filtrowanej pod-macierzy . Tak więc, nie będzie w stanie powiedzieć, indeks osoby w oryginalnej
people
tablicy, będziesz wiedzieć tylko indeks $ zwomen
lubmen
sub-macierzy. Spróbuj usunąć za pomocą tego, a będziesz znikał z każdego miejsca, z wyjątkiem miejsca, w którym chciałeś. Co robić?Jeśli masz szczęście, że używasz modelu danych zawierającego unikalny identyfikator dla każdego obiektu, użyj go zamiast $ index, aby znaleźć obiekt i
splice
go z głównej tablicy. (Użyj mojego przykładu poniżej, ale z tym unikalnym identyfikatorem.) Ale jeśli nie masz tyle szczęścia?Angular w rzeczywistości zwiększa każdy element w tablicy z powtórzeniami ng (w głównej, oryginalnej tablicy) o unikalną właściwość o nazwie
$$hashKey
. Możesz przeszukać oryginalną tablicę pod kątem dopasowania$$hashKey
elementu, który chcesz usunąć, i w ten sposób się go pozbyć.Należy pamiętać, że
$$hashKey
jest to szczegół implementacji, nieuwzględniony w opublikowanym interfejsie API dla ng-repeat. Mogą w dowolnym momencie usunąć obsługę tej właściwości. Ale prawdopodobnie nie. :-)Wywołaj z:
EDYCJA: Użycie takiej funkcji, która wprowadza
$$hashKey
zamiast nazwy właściwości specyficznej dla modelu, ma również znaczącą dodatkową zaletę polegającą na tym, że można użyć tej funkcji w różnych modelach i kontekstach. Podaj je z odniesieniem do tablicy i odniesieniem do przedmiotu, a powinno po prostu działać.źródło
Zwykle piszę w takim stylu:
Mam nadzieję, że to pomoże Ci użyć kropki (.) Pomiędzy $ scope a [yourArray]
źródło
deleteCount
. Liczba całkowita wskazująca liczbę starych elementów tablicy do usunięcia. Jeśli deleteCount ma wartość 0, żadne elementy nie są usuwane. W takim przypadku należy podać co najmniej jeden nowy element. Jeśli deleteCount jest większa niż liczba elementów pozostałych w tablicy, zaczynając od początku, wówczas wszystkie elementy do końca tablicy zostaną usunięte. Dokumentacja Array.prototype.splice ()Opierając się na przyjętej odpowiedź, to będzie pracować
ngRepeat
,filter
a moje oczekiwania uchwyt lepiej:Kontroler:
Widok:
źródło
wdrożenie bez kontrolera.
Metoda splice () dodaje / usuwa elementy do / z tablicy.
indeks : wymagane. Liczba całkowita określająca, w której pozycji dodawać / usuwać elementy. Użyj wartości ujemnych, aby określić pozycję od końca tablicy.
howmanyitem (s) : Opcjonalne. Liczba elementów do usunięcia. Jeśli ustawione na 0, żadne elementy nie zostaną usunięte.
item_1, ..., item_n : opcjonalnie. Nowe elementy do dodania do tablicy
źródło
Nie zgadzam się, że powinieneś wywoływać metodę na kontrolerze. Powinieneś korzystać z usługi dla dowolnej faktycznej funkcjonalności i powinieneś definiować dyrektywy dla dowolnej funkcjonalności skalowalności i modułowości, a także przypisywać zdarzenie kliknięcia, które zawiera wywołanie usługi, którą wstrzykujesz do swojej dyrektywy.
Na przykład na HTML ...
Następnie utwórz dyrektywę ...
Następnie do usług ...
Kiedy napiszesz poprawnie swój kod, bardzo ułatwisz pisanie przyszłych zmian bez konieczności jego restrukturyzacji. Jest on odpowiednio zorganizowany, a zdarzenia niestandardowe kliknięcia są obsługiwane poprawnie przez wiązanie przy użyciu niestandardowych dyrektyw.
Na przykład, jeśli twój klient mówi: „hej, zróbmy teraz połączenie z serwerem i przygotuj chleb, a następnie wyskakuj modal”. Będziesz mógł łatwo przejść do samej usługi bez konieczności dodawania lub zmiany kodu HTML i / lub kodu metody kontrolera. Jeśli masz tylko jedną linię na kontrolerze, w końcu będziesz musiał skorzystać z usługi, aby rozszerzyć funkcjonalność do cięższego podnoszenia, o który prosi klient.
Ponadto, jeśli potrzebujesz innego przycisku „Usuń” w innym miejscu, masz teraz atrybut dyrektywy („ng-remove-birthday”), który możesz łatwo przypisać do dowolnego elementu na stronie. Dzięki temu jest teraz modułowy i wielokrotnego użytku. Przyda się to w przypadku paradygmatu komponentów sieciowych HEAVY w Angular 2.0. W 2.0 nie ma kontrolera. :)
Happy Developing !!!
źródło
Oto kolejna odpowiedź. Mam nadzieję, że to pomoże.
Pełne źródło znajduje się tutaj
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
źródło
jeśli masz identyfikator lub dowolne określone pole w swoim elemencie, możesz użyć filter (). zachowuje się jak Where ().
w kontrolerze:
źródło
z kontrolera (funkcja może znajdować się w tym samym kontrolerze, ale wolisz zachować ją w usłudze)
źródło