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:
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!
Might be a cool article but I wouldn’t know, I left before reading because there were too many spammy autoplay videos (with audio ON)…ads are one thing, but this is overkill man.
You can simply use
$scope.movies.indexOf(yourterm) == -1 {
push data
}
This is more optimized way of doing it – thanks for sharing the tip!