AngularJS To do App – Part III

So continuing on and upwards, what every To do list should have, in no particular order are the following:

  • Check of an item
  • Edit an item
  • Delete an item

Incidentally the first thing that came to mind was the delete function (only when I had that did the rest occur, which arguably are more important features).

I somewhat implemented deleting by including a  button with a ngClick directive within the ngRepeat directive:

$scope.del = function() { $scope.items.pop(); }
<ul ng-repeat="items in items track by $index">
<li>{{ item }} <button type="submit" ng-click="del()">X</button></li>
</ul>

Sure, it should only affect the item it is (magically) tied to heh, heh… no. Pop didn’t go the weasel as it removes an array item from the end. And any other array method I’d come across didn’t seem to be able to remove items unless at the start or end. However, in that same post I had linked to ECMA-262 (Standards Document) which is the comprehensive language specification guide for ECMAScript, or JavaScript as its known as when not protecting Gotham city. That had fairly detailed (verbose) items about array methods – in particular Array.prototype.splice. I thought it was like slice but it seems similar to what a delete function should do:

Array.prototype.splice (start, deleteCount, ...items )
Note:  When the splice method is called with two or more arguments, start, 
deleteCount and zero or more items, the deleteCount elements of the array 
starting at integer index start are replaced by the arguments items. 
An Array object containing the deleted elements (if any) is returned.

Sounds about right, except I don’t want to want to replace anything with something else, nor return the deleted item. The language specification document is not the most user friendliest nor have any usable examples, but there’s tons of other information available on splice online.

W3schools.com states that the splice method adds AND removes items (holy utility belt stuffer Batman). Also it clearly states that second and third parameters are optional.

So our delete function is pretty similar to the add function:

$scope.del = function(index) { // parameter for index
  // start at index required and delete one item, which is itself
  $scope.items.splice(index, 1);
}

So in our HTML, we just need to just latch onto current index position of the item to which the delete button (with the ngClick directive which is iteratively assigned by ngRepeat) is attached.

Being the cool cat I am, I intuitively (counter it seems in hindsight) just threw in ‘this’ into the delete function as a parameter

...ng-click="del(this)">...

Because this is all powerful, this is better than that (except when you assign this to that). I should’ve known better than that – what I did was a total party foul, which I won’t get into at this moment. At that stage the list item was being removed from the top, like shift() would. The proper solution, it turns out, was staring at me all along.

I ran into the issue of not being able to create more than one item in the list, mentioned in the previous post, because AngularJS doesn’t like duplicates in the ngRepeat directive. The fix was add ‘track by $index’ – which assigns, and I quote, “each list item a key by virtue of its index…”

So now each added item has its own delete button which only applies to that item.

All the updates can be seen in the latest commit.
Updated functionality can be seen on the associated github page ‘ToDo’. (might need to do a hard refresh to get the latest working example).

More on the other features coming shortly…

ps I renamed my html file from ‘todo.html’ to ‘index.html’ which shows up in github diff as two different pages.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.