I have an angularjs code below which works very fine to display a record from database. Because the content is lengthy, I want to add read more button via jquery. If I call the jquery data outside the angularjs ng-repeat function, the ReadMore button works. eg
<div class="text">
Hi! Introducing myself as wasco man. I am an arena where people can visit by typing wasco from any where in the world. The purpose of my birth is to give solutions in all ramifications. Coming to my work is a web designer and a developer who has got vast experience in giving solutions
on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire.
<div class="post" ng-repeat='post in posts'>
</div>
But the problem now is that when I tried to call the Jquery Data within the angularjs ng-repeat function, the readmore button does not work. It seems that angularjs is conflicting with jquery as in the code below
<div class="post" ng-repeat='post in posts'>
<div class="text">
Hi! Introducing myself as wasco man. I am an arena where people can visit by typing wasco from any where in the world. The purpose of my birth is to give solutions in all ramifications. Coming to my work is a web designer and a developer who has got vast experience in giving solutions
on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire.
</div> </div>
Below is the entircode..
<!doctype html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<!--read more text starts here-->
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
function breakWords(paragraph, showtext){
var words = paragraph.split(' ');
var newText = '';
for(i=0; i<words.length; i++){
if(i<= showtext){
newText += words[i] + ' ';
}else {
if (i == (showtext + 1)) newText += '... <span class="fulltext hide">';
newText += words[i] + ' ';
if (words[i+1] == null) newText += '</span><a href="#" class="links"> » read more</a>';
}
}
return newText;
}
$('.text').each(function () {
$(this).html(breakWords($(this).html(), 50));
$(this).children('span').hide();
}).click(function () {
var fulltext = $(this).children('span.fulltext');
var links = $(this).children('a.links');
if (fulltext.hasClass('hide')) {
fulltext.show(200);
links.html(' » hide');
fulltext.removeClass('hide');
} else {
fulltext.fadeOut(100);
links.html(' « read more');
fulltext.addClass('hide');
}
return false;
});
});
</script>
<!--read more text ends-->
</head>
<body ng-app='myapp'>
<div class="content" ng-controller='fetchCtrl' >
<div class="post" ng-repeat='post in posts'>
<div class="text">
Hi! Introducing myself as wasco man. I am an arena where people can visit by typing wasco from
any where in the world.
The purpose of my birth is to give solutions in all ramifications.
Coming to my work is a web designer and a developer who has got vast experience in giving solutions
on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web
applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire.
Thanks a lot !!!</div>
<h1 >{{ post.title }}</h1>
<div class="post-text">
{{ post.content }}
</div>
</div>
</div>
<!-- Script -->
<script src="angular.min.js"></script>
<script>
var fetch = angular.module('myapp', []);
fetch.controller('fetchCtrl', ['$scope', '$http', function ($scope, $http) {
// Fetch post data
$scope.getPosts = function(){
$http({
method: 'post',
url: 'likeunlike.php',
data: {request: 1}
}).then(function successCallback(response) {
$scope.posts = response.data;
});
}
$scope.getPosts(); // Fetch post data
}
]);
</script>
</body>
</html>
