I am working on the news update section of my Angular website, where I want to display the latest news updates with owl carousel but ng-repeat displays nothing . json data is displaying in console but not in front.
My code is as follows:
<div id="owl-news" ng-controller="newsController" data-ng-init="news()">
<div class="item" ng-repeat="news in allData">
<div class="news-1">
<div class="body">
<p>{{ news.news}}</p>
<div class="title">{{news.news_date}}</div>
</div>
</div>
</div>
</div>
Angular code :
app.controller("newsController",function($http,$scope,$log){
var news=function(){
$http({
method:"POST",
url:"getNews.php",
dataType:"json"
}).then(function(data){
$log.log(data);
$scope.allData=data;
},function(data){
$log.log("Error has occured!.");
});
}; news();
});
I tested it in JSFiddle: https://jsfiddle.net/smoki99/rqwz6mno/12/
After doing a lot of tests:
$scope.allData the correct return value. Usually "data" contains an additional data field. I unfortunably not know, what your exact "JSON" return looks like, but it take it from this as source ( http://www.dysartpharmacy.com/index.php/site_search/get/news )
So I think you must change your line simply to
$scope.allData = data.data;
Here my complete example:
<div ng-app="myApp" ng-controller="newsController">
<div class="item" ng-repeat="news in allData">
<div class="news-1">
<div class="body">
<p>{{ news.news}}</p>
<div class="title">{{news.news_date}}</div>
</div>
</div>
</div>
</div>
And JS Code:
// the main (app) module
var app = angular.module("myApp", []);
// add a controller
app.controller("newsController",function($http,$scope,$log, $httpParamSerializerJQLike){
var returnData = '[{"news":"news1","news_date":"2017-09-14"}, {"news":"news2","news_date":"2017-09-14"}]';
var data = $httpParamSerializerJQLike({
json: returnData
});
var news = function() {
$http({
method: "POST",
url: "/echo/json/",
datatype: "json",
data: data
}, data).then(function (data) {
debugger;
$log.log(data);
$scope.allData = data.data;
},function(data) {
$log.log("Error has occured!");
});
};
news();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.