Tuesday 6 January 2015

Display list of data with ng-repeat using JSON data in AngularJS.


angularjs

I scratched my head of writing a HELL lot of code, but then I found AngularJS. An awesome tool just make it so simple not only creating tables from data nut the real thing is after that... User interactivity. Filter Data, order data, without any interaction to your datasource and without page reloading. I am putting the code here just go though it. I think this should be helpful to you.




<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>HTML Starter</title>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
myApp = angular.module('myApp',[]);
myApp.controller('NameCtrl',function($scope) {
    $scope.names=['Subhro','Somoshree','Sayani'];
   
$scope.addNames = function () {
    $scope.names.push($scope.addedName);
    $scope.addedName = '';
}

$scope.removeNames = function (name) {
    $scope.names.splice($scope.names.indexOf(name),1);
//    $scope.addedName = '';
}

});

</script>
</head>
<body ng-controller='NameCtrl'>
<ul id="nav" role="navigation">
<li ng-repeat="name in names">{{name}}  <a href="" ng-click="removeNames(name)">Remove</a></li>
</ul>
<input type=text ng-model="addedName" />
<form ng-submit="addNames()">
<input type="submit" value="Add" />
</forms>
</body>
</html>



#angularjs #json #ngRepeat #directive 

HTML Starter

No comments: