2017-09-20 11 views
0

私は角度のあるウェブサイトのニュースアップデートセクションで作業しています。ここでは、フクロウカルーセルで最新のニュースアップデートを表示したいのですが、ng-repeatは何も表示しません。 jsonデータがコンソールに表示されていますが、前面に表示されていません。次のように角度js ng-repeatは、フクロウカルーセルと連携していません

私のコードは次のとおりです。

<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> 

角度コード:

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(); 

     }); 

答えて

0

私はJSFiddleでそれをテストした:

$:多くのテストを行った後https://jsfiddle.net/smoki99/rqwz6mno/12/

scope.allData正しい戻り値。通常、「データ」には追加のデータフィールドが含まれます。 (http://www.dysartpharmacy.com/index.php/site_search/get/news

は、だから私はあなたが単に

$scope.allData = data.data; 
ここ

私の完全にあなたの行を変更しなければならないと思う私はunfortunablyあなたの正確な「JSON」リターンがどのようなものか、知りませんが、それはソースとしてこのことからそれを取ります例:

<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> 

そしてJSコード:即時応答へ

// 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(); 

}); 
+0

感謝。あなたのコードはうまくいきますが、フクロウカルーセルはいくつかの問題を引き起こします。すべてのデータを1つのスライドに入れます。 any suggesssion –

+0

これは次のような場合です:https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html divsを再配置して正しい "class" –

関連する問題