I am very much new to AngularJS.
Generally I have seen people using $route for refreshing data from database. But for learning purpose I have created an object in the custom service, stored some data in the Object and calling that service in the controller.
But when I am adding more values in the object and try to update it using the ngClick, no changes take place. Though, on refreshing the whole page, changes takes place. But I just want that particular section to update.
Here’s my JavaScript code:
var app=angular
.module('app',['ngRoute'])
.service('data', function(){
this.students=[
{id: 1, name: 'Mark', gender: 'Male', city: 'London'},
{id: 2, name: 'Henry', gender: 'Male', city: 'Manchester'},
{id: 3, name: 'John', gender: 'Male', city: 'Chennai'},
{id: 4, name: 'Sara', gender: 'Female', city: 'Sydney'},
{id: 5, name: 'Tom', gender: 'Male', city: 'New York'},
{id: 6, name: 'Pam', gender: 'Male', city: 'Los Angeles'},
{id: 7, name: 'Catherine', gender: 'Female', city: 'Chicago'},
{id: 8, name: 'Mary', gender: 'Female', city: 'Houston'},
{id: 9, name: 'Mike', gender: 'Male', city: 'Phoenix'},
{id: 10, name: 'Rosie', gender: 'Female', city: 'Manchester'},
{id: 11, name: 'Sasha', gender: 'Female', city: 'Hyderabad'},
{id: 12, name: 'Naatasha', gender: 'Female', city: 'Bhungi'},
// {id: 13, name: 'akash', gender: 'Male', city: 'lugi'},
// {id: 14, name: 'aaakash', gender: 'Male', city: 'lugi'}
];
})
.controller('studentcontroller',function($scope,data,$route){
$scope.rdata=function(){
console.log("asd");
$route.reload();
};
$scope.students=data.students;
});
Here’s the code calling it
<h1>List of Students</h1>
<ul>
<li ng-repeat="student in students">
<a href="students/{{student.id}}">{{student.name}}</a>
</li>
</ul>
<button ng-click="rdata()">Reload Data</button>
Please help me in learning something new.
Source: AngularJS
