Avoid empty and duplicate records to get pushed in AngularJS

I am back again with a basic example on AngularJS on how to display the data from a set or array or JSON array, and how to add or insert or append data in existing JSON array and in the same time how could we avoid empty data or duplicate records to get pushed into the JSON array.

This time I am back with Screencast Video tutorials or presentation whatever you call it is and this is my first screen-cast video presentation too and that too in AngularJS, going forward I will try to improve my voice and presentation skills which will helpful to me and you to get some online tutorials going forward. Since this is my first video, expecting your valuable feedback on where I have to improve myself – which helps me to grow further for a better presentation next time. I really appreciate your feedback.

Ok – let me come back to this basic AngularJS tutorial, in this tutorial you can see how to use ngRepeat directive, forEach global API and while inserting data how to avoid duplicate or empty data to get push into the JSON array.

Here is the screen-cast video which explains you well in details in case you are starter in AngularJS or about to learn AngularJS:

The below JavaScript are with comments to explain what they are etc. These lines are self explanatory, even I have hosted this AngularJS app for preview. You can download and preview this app from the following:

Demo | Download

JavaScript Code:

          var wittyApp = angular.module('wittyApp',[]);
          function AvoidDuplicateEntries($scope){
          $scope.movies = [
          {moviename: 'SuperMan'},
          {moviename: 'SpiderMan'},
          {moviename: 'BatMan'}
          ];
          var someMovie = $scope.movies;
          $scope.addMovie = function (){
          var newMovie = $scope.moviename;
          var oldmovies;
          if(newMovie){ //This will avoid empty data
          angular.forEach($scope.movies, function(eachmovie){ //For loop
          if(newMovie.toLowerCase() == eachmovie.moviename.toLowerCase()){ // this line will check whether the data is existing or not
          oldmovies = true;
          }
          });
          if(!oldmovies){
          someMovie.push({moviename:newMovie});
          }
          }
          }
          }

HTML Code:

<div style="padding:20px" ng-app="wittyApp" id="ng-app" ng-controller="AvoidDuplicateEntries">
<h1>Basic App using AngularJS</h1>
<table class="table table-bordered" style="width:220px;">
<thead>
<tr><td>#</td>
<td>Movie Name</td></tr>
</thead>
<tr ng-repeat='movie in movies'>
<td>{{$index+1}}</td>
<td>{{movie.moviename}}</td>
</tr>
</table>
<form ng-submit="addMovie();">
<input type="text" ng-model="moviename" size="30" placeholder="Which movie you want to watch" /><br />
<input type="submit" class="btn btn-primary" value="Add Movie">
</form>
</div>

Liked it? Appreciate your feedback about my first video and first example on AngularJS :)
More to come – keep visiting us!