Yo ninjas, in this AngularJS tutorial, I’ll go through how we can handle form submissions with the ng-submit directive. We’ll use ng-submit to allow the user to enter a new ninja to the data list, and use our controller to handle the event itself.

Hey gang, in this AngularJS tutorial, I’ll be introducing you to filters and how we can use them to change the way our data is displayed to a user. Filters can be used in conjunction with ng-repeat, or directly on the expression itself. We use Angular filters to do things like ordering a list of items alphabetically, or by type, or to display numbers as a currency.

+ Source files on GitHub –
+ Atom text editor –

You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…


========== JavaScript for Beginners Playlist ==========

============ CSS for Beginners Playlist =============

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to

================== Social Links ==================

Twitter – @TheNetNinja –


  1. Hey Net Ninja, why do you manually set the 3 properties within newninja back to blank instead of just saying $scope.newninja = {};? You do the same thing in your addNinja function, rather than simply pushing in the whole newninja object into your array. Is there a reason for this, or was it just a slip up?

  2. If I add a rate that has a comma in it, i.e. '1,000', the number won't save in the form. How could you adjust so that the form accepts '1000' and '1,000' and converts them into currencies?

  3. Just a random thought. I think we can implement the same functionalities by using ng-click. Any other special uses for this directive?

  4. hi people! may you explain how to add jpg or png file into object when i insert <input type="file">. which method could i use?

  5. when using ng-submit how do you permanently store the information submitted onto the object or the JSON. With the video showing storing but erasing on refresh. Thanks!!! Extremely helpful series

  6. Great Tutorials!
    Is there a reason you don't clear the `$scope.newninja` with `=[]` instead of doing each individual thing? Is it just best practice? Is it a performance thing?

  7. you are using $scope for your arrays and objects…

    like this one:

    $scope.ninjas = [{},{},{}]

    i use the word "this", like this one:

    this.ninjas = [{},{},{}]

    when I use THIS word… my code works…
    when i use $scope… it doesn't

    am i missing anything?

  8. Heya. Q about how you're zeroing out the form. I noticed you repeated the process three times, setting the data to null for each field. Is there a DRYer way to do this?

  9. Hey Net Ninja, do you have plans in making a tutorial playlist about a more backend-ish subject like maybe express.js or stuff like that? Great work with this angular playlist, I don't miss a single one!


Please enter your comment!
Please enter your name here