javascript - Return to current state in AngularJS -

javascript - Return to current state in AngularJS -

i have facebook-like application written using codeigniter , angularjs. when click like button of post, post resides in bottom part of page, homecoming upper part of page. how can create when click on particular point, still remain in area?

here's code

var newsfeed = angular.module('newsfeed', ['ngroute']); newsfeed.controller('newsfeedcontroller',function($scope,$http){ var getposts = function(){ $http.get('/status_list/newsfeed_gen').success(function(data){ $scope.posts = data; console.log(data); }); } getposts(); $scope.like = function(id) { $http({ method: "post", url: '/status_list/like/'+ id, headers: { 'content-type' : 'application/x-www-form-urlencoded' }, data: $.param(id) }) .success(function(data){ console.log(data); getposts(); }) .error(function(data){ console.log(data); }); }

});

==== html ====

<div ng-app="newsfeed" ng-controller="newsfeedcontroller"> <div class="panel panel-default" ng-repeat="post in posts"> <div class="panel-heading"><a href="#" class="pull-right">view all</a> <a href="<?= base_url('{{post.username}}')?>"> <h4><img src="<?= base_url('{{post.profile_pic}}') ?>"/> {{post.fullname}}</h4> </a> <h6>{{post.date_posted}}</h6> </div> <div class="panel-body"> <div ng-show="post.photo != null"> <img src="/public/uploads/{{post.photo}}"> </div> {{post.body}} <hr> <div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default" data-ng-click="like(post.id)">{{post.like}} <!-- counter --><i class="glyphicon glyphicon-thumbs-up"> </i> </button> <button class="btn btn-default">{{post.comment}} <!-- comment counter --><i class="glyphicon glyphicon-comment"></i></button> </div> <input type="text" class="form-control" placeholder="add comment.."> </div> </div> </div> </div>

you can utilize anchorscroll scrolls specific element identified id:

newsfeed.controller('newsfeedcontroller', function($scope, $http, $location, $anchorscroll, $timeout) { var getposts = function() { $http.get('/status_list/newsfeed_gen').success(function(data) { $scope.posts = data; console.log(data); }); } getposts(); $scope.like = function(id) { $http({ method: "post", url: '/status_list/like/' + id, headers: { 'content-type': 'application/x-www-form-urlencoded' }, data: $.param(id) }) .success(function(data) { console.log(data); $http.get('/status_list/newsfeed_gen').success(function(data) { $scope.posts = data; // wait html render $timeout(function() { $location.hash('post' + id); $anchorscroll(); }); }); }) .error(function(data) { console.log(data); }); } });

extend each post id property

<div class="panel panel-default" ng-repeat="post in posts" id="{{'post' + post.id}}">

alternative 2:

another solution update specific post:

$scope.like = function(post) { var id = post.id; $http({ method: "post", url: '/status_list/like/' + id, headers: { 'content-type': 'application/x-www-form-urlencoded' }, data: $.param(id) }) .success(function(data) { console.log(data); $http.get('/status_list/newsfeed_gen').success(function(data) { (var = 0; < data.length; i++) { var updatedpost = data[i]; if (updatedpost.id == id) { post = updatedpost; } } } $scope.posts = data; // wait html render $timeout(function() { $location.hash('post' + id); $anchorscroll(); }); }); }) .error(function(data) { console.log(data); });

html:

<button class="btn btn-default" data-ng-click="like(post)">{{post.like}} <!-- counter --><i class="glyphicon glyphicon-thumbs-up"> </i> </button>

javascript angularjs codeigniter