私の単純なAngularjsコードは結果を表示しません

Question

私はモジュールコントローラから都市を表示する簡単なAngularJSを開発しています。

これは私のコードです：

// module: 
var myApp = angular.module('myApp', []); 


//Service: 
    myApp.service('myService', function ($http) { 
    this.getCities = function() { 
    return $http.get('/City/GetCities'); 
    } 
}); 

//Controller: 
myApp.controller('myController', function ($scope, myService) { 
getCitiesList(); 
function getCitiesList() { 
    var getCitiesList = myService.getCities(); 

    getCitiesList.then(function (emp) { 
     $scope.cities = emp.data; 

     }, function() { alert('Not Found'); }); 
    } 
}); 

CSHTMLファイル：

 @{ 
     ViewBag.Title = "View1"; 
     Layout = "~/Views/Shared/_Layout.cshtml"; 
    } 

    <h2>View1</h2> 
    @section scripts{ 
    <script src="~/Scripts/angular.min.js"></script> 
    <script src="~/js/angulartest.js"></script> 
    } 
    <div ng-app="myApp"> 
     <div ng-controller="myController"> 
      <table> 
       <tr> 
        <td> 
         ID 
        </td> 
        <td> 
         Name 
        </td> 
       </tr> 
       <tr ng-repeat="x in citiesList"> 
        <td> 
         {{x.ID_City}} 
        </td> 
        <td> 
         {{x.CityName}} 
        </td> 
       </tr> 
      </table> 
     </div> 
    </div> 

私はMVCコントローラコードをトレースします。 City/GetCities JsonResultを起動して返しますが、angularjsコントローラには結果が表示されません。あなたのHTML内

Answer 1

あなたは

<tr ng-repeat="x in citiesList"> 

変数 "citiesList" を使用しますが、それは

$scope.cities = emp.data; 

Answer 2

変更

<tr ng-repeat="x in citiesList"> 

この

あなたのコントローラのように "都市" である必要があります

<tr ng-repeat="x in cities"> 

やサービスは何も返さないので、工場

//Service: 
myApp.factory('myService', function ($http) { 
    this.getCities = function() { 
    return $http.get('/City/GetCities'); 
    } 
}); 

にこのサービスを変更します。詳細はこれを読ん

service vs factory

Answer 3

あなたのモジュールは、この

var myApp = angular.module('myApp', []) 

のようになります。しかし、あなたは半collanで終了しています（;）。あなたのサービスで

この

myApp.service('myService', function ($http) { 
    var cities = []; 
    this.getCities = function() { 
    $http.get('/City/GetCities') 
     .success(function(emp){ 
      cities = emp.data; 
      return cities; 
     }) 
     .error(function(error){ 
     alert('invoking error'); 
     }); 

    } 
}); 

は、サービスしてみてくださいあなたは空の配列を宣言し、バック成功コールでその配列を返すようにしようとしているので、唯一の配列を返します。テンプレートと接触しcitiesListのinoderのための$スコープ変数を宣言する必要があり

myApp.controller('myController', function ($scope, myService) { 


      $scope.citiesList = myService.getCities(); 
      console.log($scope.citiesList); 

}); 

側コントローラ内で

。あなたのhtml

<tr ng-repeat="x in citiesList"> 
        <td> 
         {{x.ID_City}} 
        </td> 
        <td> 
         {{x.CityName}} 
        </td> 
       </tr> 

で

は今、これは動作します。