Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Brendan Moran
14,052 PointsOne major bug and one major UI problem with this app
I have found two major bugs with this app (when everything is functioning as Huston intended).
1) The bug. When you have clicked the checkbox and marked an item as completed, you cannot delete it. For some mysterious reason, in the UI, it deletes the item one back from the one you tried to delete. I did some console logging to print $index and todo.name of the "deleted" item, and this correctly printed the index and title of the todo I clicked to delete. However, in the UI, it is still the item right above the element I clicked that disappears.
2) UI problem: Why not teach us how to name the new todo? This is a glaring issue, and was probably the primary thing I was looking forward to throughout the course, but it was never covered. Without being able to create and name a new todo in the UI, this todo list app is pretty much useless.
I was pretty disappointed with the course. Huston is great and he has done a good job teaching me some other things in some of the other courses here on Treehouse, but this whole course was a bit of a mess. Frameworks are a big deal, arguably the biggest deal, in javaScript development these days. I hope any future Angular 2/React/Vue courses are done far better.
1 Answer
Nicolas Hampton
44,638 PointsBrendan,
Thanks for asking that, as it's a good question. Yes, if we mark any of our items as "completed" in our todo app, using the delete button deletes the wrong todo. The reason for this is that the ng-repeat directive that we display and sort our todos in actually has a different scope than the scope our original todos are stored in. The original todos are in what we call the "root scope", or $scope. But the smaller scope created by ng-repeat has a copy of todos that it has sorted into a different order, based on the "completed" property, remember? So if any todos are completed, the todos list ng-repeat has is in a different order than the todos list in $scope. So when we use the slice method on $scope.todos with the $index from ng-repeat, we're slicing the wrong item if an item has been completed and thus resorted our ng-repeat list. An easy fix is outlined in a previous question about this here: https://teamtreehouse.com/community/issues-with-deleting-checkedoff-items
As for renaming a new todo, the default name is "this is a new todo". You should be able to click on the name and edit it, then save it. For this small practice project, than seems like a reasonable UI implementation. Thanks for bringing this up, it's important to understand that ng-repeat creates it's own small scope!
Brendan Moran
14,052 PointsBrendan Moran
14,052 PointsThanks Nicolas.
I already understood that ng-repeat had its own scope, but had to spend some more time with my face on my desk thinking about this. After racking my brain for a bit and thinking about your answer, I get it: I had forgotten that $scope.todos is what we are splicing, not the UI ng-repeat array, and that we are getting our "index" value from the variable $index of ng-repeat, which changes with the list order, and then we are using that to splice the original array that didn't change. Oi vey. -__-
So, have I got this right? Say I create "New todo" and it goes to the top of a list of 4 pre-existing todos, creating a new list of 5. It is now index 0 for both $scope.todos (because unshift) and $index of ng-repeat. If I mark it complete, it goes to $index 4, but in $scope.todos it is still 0, and the last unchecked item is still 4. When I delete $index 4, it deletes index 4 from $scope.todos, which is the last unchecked item.
I can venture out there into the documentation on my own and figure out how to get my instant input for the new todos, but I think at this point in the game, I would rather spend my time learning to do that in Vue, React, or Angular 2.