Question

我通过学习教程编写了一些Angular JS代码。但是在那个视频教程中，代码工作正常，但我的代码无效。我的网页显示空白页。

index.html：

<div body ng-app="angularTable">

   <div class="all_cat_main" ng-controller="listdata">

      <div class="all_cat" ng-repeat="state in statelist">

         <h2>{{state.Satename}}</h2>

      </div>

   </div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script src="~/Content/AppJS/AllSate.js"></script>

AllSate.js

var app = angular.module('angularTable', []);

app.controller('listdata', function ($scope, $http) {
   $scope.statelist = []; 
   $.ajax({
     url: "/JobWebApi/getDataForAngularGrid",
     dataType: 'jsonp',
     method: 'GET',
     data: '',
   })
   .success(function (response) {
      $scope.statelist = response;
   })
   .error(function (error) {
       alert(error);
   });
});

请有人指导我为什么代码无效？

Answer 1

请从Controller中删除注入的$ http并首先加载Jquery lib文件。（http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js）

Answer 2

＆＃13;

var app = angular.module('angularTable', []);

app.controller('listdata', function ($scope) {
$scope.statelist =""; 
$.ajax({
url: "http://api.geonames.org/weatherIcaoJSON?ICAO=LSZH&username=demo",
dataType: 'jsonp',
method: 'GET',
data: '',
}).success(function (response) { debugger;
$scope.statelist = response.status;
                                $scope.$apply();
})
.error(function (error) {
alert(error);
});
});

＆＃13;

<html ng-app="angularTable">
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  </head>
  <body ng-controller="listdata">
  
    <div >

<div >



  <h2>{{statelist.message}}</h2>


</div>


</div>
    
  </body>
  </html>

＆＃13;

我的Angular JS代码不起作用

2 个答案: