Jak działa ten splice?

pytanie zadane 20 października 2016 w JavaScript przez Madar Obywatel (1,560 p.)

Witam. Mam pytanie odnośnie działania pewnej apki. Znalazłem ją w sieci i postanowiłem od deski do deski prześledzić jej działanie:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () {
        $scope.errortext = "";
        if (!$scope.addMe) {return;}
        if ($scope.products.indexOf($scope.addMe) == -1) {
            $scope.products.push($scope.addMe);
        } else {
            $scope.errortext = "The item is already in your shopping list.";
        }
    }
    $scope.removeItem = function (x) {
        $scope.errortext = "";
        $scope.products.splice(x, 1);
    }
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
  <p>{{errortext}}</p>
</div>

</body>
</html>

Pytanie mam odnośnie splice, a mianowicie tego fragmentu kodu:

    $scope.removeItem = function (x) {
        $scope.errortext = "";
        $scope.products.splice(x, 1);
    }

Jak to działa, że funkcja przekazuje jakiś parametr i kiedy $scope przesyła model do widoku, to przy użyciu ng-click usówa się kliknięty element? Bez przekazania parametru ta funkcja nie wykona się poprawnie. Zrozumienie tego mnie nieco przerasta, więc będę bardzo wdzięczny, jeśli ktoś wytłumaczy mi to w "łopatologiczny" sposób :)

1 odpowiedź

odpowiedź 20 października 2016 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 20 października 2016

Najlepsza

<li ng-repeat="x in products">

https://docs.angularjs.org/api/ng/directive/ngRepeat

Angularowa dyrektywa służąca do iterowania po kolekcjach. Udostępnia ona kilka propertisów, m.in.: $index, który odpowiada za aktualny iterator pętli. Tenże iterator jest przesyłany do funkcji removeItem() podpiętej do $scope kontrolera.

<span ng-click="removeItem($index)">

, dzięki czemu wewnątrz tej funkcji dostępny jest aktualny indeks elementu, w który kliknąłeś.

$scope.removeItem = function (x) {
    $scope.errortext = "";
    $scope.products.splice(x, 1);
}

W funkcji na tablicy products wykonywana jest metoda splice(). Dokonuje ona usunięcia jednego elementu zaczynając od przekazanego indeksu.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

Pierwszym parametrem (w funkcji oznaczonym jako x, który jest tym przekazanym iteratorem z dyrektywy ng-repeat) jest numer indeksu w tablicy, od którego chcesz zacząć usuwać elementy. drugim jest ilość usuwanych elementów - w przypadku tej funkcji, jest to jeden element.