How to convert jquery to Angular in $(".video:last").after(data); - angularjs

Question

$(".video:last").after(data);
in ng-repeat Angular
$http({
method : "GET",
url : base_url + 'video/get_video_list',
params: {last_video_id : ID}
}).success(function(data){
$scope.videos = data;
});//End http
Please Help Me T_T

Answer 1

So assuming you are finding the last DOM element with a class of 'videos', $(".video:last"), and then inserting the content from your data variable after that, .after(data); and also based on you bolding ng-repeat I'm assuming you are using an ng-repeat for $scope.videos in your partial.... you can access the last item in an ng-repeat via $last.
Here is a list of other ng-repeat variables
if you set your data equal to a $scope value (i.e. $scope.myData) you can interpolate that into your last ng-repeat item. i.e:
<div ng-if="$last">{{myData}}</div>
But to be honest I'm not sure what you're asking...
Hope this points you in the right direction.

Answer 2

i try to Infinite Scrolling
http://binarymuse.github.io/ngInfiniteScroll/
i can not show data when scroll
every function loadMore() show in ng-repeat replace in old value T_T
i hope use Angular for Good Filter Sort Data in Infinite-scroll
thank for Answer me..
<script type="text/javascript">
var app = angular.module('app', ['infinite-scroll']);
app.controller('DemoController', function($scope, $http) {
var base_url = '<?php echo site_url(); ?>';
$scope.loading = true;
var ID = $(".video_box:last").attr("id");
console.log('Value Id ///////////');
console.log(ID);
console.log('//////////////// load more ////////////');
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$http({
method : "GET",
url : base_url + 'video/get_video_list',
params: {last_video_id : ID}
}).success(function(data){
$scope.videos = data;
console.log('//////////////// success Data ////////////');
$scope.loading = false;
});//End http
};//End loadMore
});//End Controller
// we create a simple directive to modify behavior of <ul>
app.directive("whenScrolled", function(){
console.log('whenscroll--------------');
return{
restrict: 'A',
link: function(scope, elem, attrs){
// we get a list of elements of size 1 and need the first element
raw = elem[0];
// we load more elements when scrolled past a limit
elem.bind("scroll", function(){
if(raw.scrollTop+raw.offsetHeight+5 >= raw.scrollHeight){
scope.loading = true;
console.log('whenscroll--------------');
// we can give any function which loads more elements into the list
scope.$apply(attrs.whenScrolled);
}
});
}
}
});
</script>
<div ng-app='app' ng-controller='DemoController'>
<div infinite-scroll='loadMore()' infinite-scroll-distance='2' >
<div ng-repeat="video in videos" >
<div id='{{video.id}}' class='video_box'>
<li class='block'>
<a href='<? echo base_url();?>video/view/{{video.id}}' class='video-thumbnail' >
<img src="http://img.youtube.com/vi/{{video.url}}/1.jpg" alt='{{video.title}}'/>
<div ng-if="$last" ><h2>{{video.title}}</h2></div>
</a>
</li>
</div>
</div><!-- End video in videos -->
<div data-ng-show='loading'>Loading</div>
</div><!--End infinite-scroll-->
</div><!--End App -->