简体   繁体   中英

angular js ng-repeat is not working with owl carousel

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM