Question

我有以下代码但我的页面没有显示数据...;（我现在不知道为什么请帮助我，我是angularjs的新手。我调用web API它的工作正常的控制台日志显示json记录，但在我的页面记录现在显示...为什么

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

result = [{"ID":1,"ProductName":"xcxc","ProductDescription":"xcxc","UnitPrice":2323,"QtyAvailable":23}] 它在Chrome控制台日志中显示以下错误

XMLHttpRequest无法加载http://localhost:9000/employees。没有＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; null＆＃39;因此不允许访问。

Answer 1

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

Answer 2

代码中的所有内容都很好，可能没有加载角度或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>

Answer 3

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

Answer 4

我们必须使用JSONP来阻止交叉来源政策。

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

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

或

如果您要停用政策，请按照以下步骤

对于Windows ...在桌面上创建Chrome快捷方式。右clic＆gt;属性＆gt;捷径编辑＆＃34;目标＆＃34;路径：

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

然后尝试使用现有代码

如何在angularjs

4 个答案: