Tag Archives: syntax

AngularJS To do App – Part III

So out of the remaining features, what should I pick next to work on, hmm let me see. Edit an item, sure why not. Why not indeed.

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

It turned out more difficult than I had (not) anticipated. Not the most crucial feature but sure. Thought it would take a few days to figure out and slow down development as I couldn’t find much of a guide from scouring through a book or two and several forums.

Thought there might be some directive floating around I could use (didn’t find anything remotely close). Then I tried to do a simple update the array item in place technique.

But therein lay the difficulty as threading it through AngularJS wasn’t easy going. I cycled through a few ways to do it. Some of it involved¬† a straight ngClick using the $index as a parameter which would try and update the array item based on that index.

That didn’t work as the button I wired up to do the ‘in place’ editing simply cleared the value already present and just left the input field and buttons showing:

$scope.update = function(index){
  $scope.items[index] = $scope.item;
}

Or something along those lines as I’d changed code and banged my head so many times I can’t quite remember.

It did work eventually by recreating the first pattern I had for adding an item into the list – I needed to create a new model on the fly using ngModel and then passing the $index and that model to the function call within the controller code. Still peculiar how I couldn’t get it to work by referring to the newly created model from the $scope variable.

In hindsight the solution I came up with is very very simple and it works. The condition updating to show/hide buttons for editing purposes is verbose. Hopefully find a more succinct system or pattern online later for refactoring but for now it does the trick.

So now just one primary function left to complete to call it a mvp

  • Check of an item

For now here’s the updated demo To Do App & the latest commit.

JavaScript Arrays – Push it real good

A quick shout to JavaScript array methods. With ECMA-262 version 5 (latest version 6), came several new methods for manipulating arrays. Lets focus on the ones that allow user to add or remove from either end of an array.

Add an item to the end of an array: push()

The push() method allows an element to be appended to the end of an existing array.

var someArray = ["itemOne", "itemTwo", "itemThree"]; 

someArray.push("itemFour");

someArray;  // someArray now contains["itemOne", "itemTwo", "itemThree", "itemFour"];

Remove an item from the end of an array: pop()

The pop() method removes the last element from an array. It also returns that removed element.

var lastItem = someArray.pop();

lastItem; // contains "itemFour";

Add an item to the beginning of an array: unshift()

The unshift() method adds an item to the front of an array

someArray.unshift("itemZero");
someArray ; // now contains ["itemZero", "itemOne", "itemTwo", "itemThree"]

Remove an item from the beginning of an array: shift()

The shift() method removes and returns an item from the front of an array

var firstItem = someArray.shift();

firstItem; // contains "itemZero"