2016-10-19 16 views
-1

次のコードがありますが、私のページにデータが表示されません...(私はなぜ助けてください、私はangularjsで新しいですか?コンソールログを表示するJSONレコードが、私のページにレコードが今、なぜangularjsでレスポンスデータを表示する方法

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 
     <script src="Scripts/angular.min.js"></script> 
     <script> 
    var app = angular.module('myApp', []); 
    app.controller('customersCtrl', function($scope, $http) { 
     $http.get("http://localhost:9000/employees").then(function (response) { 
      $scope.myData = response.data; 
     }); 
    }); 


    </script> 
</head> 
<body> 
    <div ng-app="myApp" ng-controller="customersCtrl"> 
     <br> 
     <p>Today's welcome message is:</p> 
     <!--<h1>{{myWelcome}}</h1>--> 
     <ul> 
      <li ng-repeat="x in myData"> 
      <li ng-repeat="x in myData"> 
       {{ x.ProductName }} ',' {{ x.ProductDescription }} 
      </li> 
       <!--{{ x.ProductName + ', ' + x.ProductDescription }}--> 
      </li> 
     </ul> 


    </div> 

</body> 
</html> 

結果=クロームコンソールログに[{"ID":1,"ProductName":"xcxc","ProductDescription":"xcxc","UnitPrice":2323,"QtyAvailable":23}] エラー以下にそのショー

のXMLHttpRequestがhttp://localhost:9000/employeesをロードすることはできません。ノー...示してい 'Access-Control-Allow-Origin'ヘッダーが存在するリクエストされた リソースのしたがって、原点「ヌル」はアクセスが許可されません。

+0

てみてください、あなたはコンソールでエラーが発生しましたか – mymotherland

+0

いいえ....すべてうまく動作していますが、コンソールログ、jsonデータを表示しますが、私のページレコードは表示されません –

+0

あなたはjsonにアクセスしている必要があります。 –

答えて

0
 <li ng-repeat="x in myData"> 
      {{ x.FirstName }} ',' {{ x.LastName }} 
     </li> 
+0

このコードがOPに役立つ理由の説明を追加してください。これにより、今後の視聴者からの回答が得られます。詳細については、[回答]を参照してください。 –

+0

@Jerryそれはどんなリンクですか? –

0

すべての物事があなたのコードで問題あり、ロードされていない角度たり、正しい答えではないのhttp:

 var app = angular.module('myApp', []); 
 
    app.controller('customersCtrl', function($scope, $http) { 
 
     $scope.myData = [{ 
 
     FirstName: "firts1", 
 
     LastName: "last1" 
 
     }, { 
 
     FirstName: "firts2", 
 
     LastName: "last2" 
 
     }, ]; 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script> 
 

 
<body> 
 
    <div ng-app="myApp" ng-controller="customersCtrl"> 
 
    <br /> 
 
    <!--// <p>Today's welcome message is:</p>--> 
 
    <!--<h1>{{myWelcome}}</h1>--> 
 
    <ul> 
 
     <li ng-repeat="x in myData"> 
 
     {{ x.FirstName + ', ' + x.LastName }} 
 
     </li> 
 
    </ul> 
 

 

 
    </div> 
 

 
</body> 
 

 
</html>

0
<li ng-repeat="x in myData"> 
{{x.FirstName}}, {{x.LastName}} 
</li> 
+0

このコードがOPに役立つ理由の説明を追加してください。これにより、今後の視聴者からの回答が得られます。詳細については、[回答]を参照してください。 –

0

我々はJSONPを使用する必要がありますクロスオリジンポリシーを防止します。

var url = "http://localhost:9000/employees?callback=JSON_CALLBACK"; 

$http.jsonp(url) 
    .success(function(data){ 
     console.log(data); 
    }); 

または

ポリシーを無効にしたい場合は、Windowsの

を下記の手順...あなたのデスクトップ上にクロームのショートカットを作成します。 右clicクリック>プロパティ>ショートカット 編集「ターゲット」パス:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security 

そして、既存のコード

+0

は動作しません.. –

関連する問題