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控制器不显示任何结果我得到的只是在我的浏览器中：Not Found alert。

Answer 1

在你的html中，你使用变量“citiesList”

<tr ng-repeat="x in 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');
        });

    }
});

service只返回数组，因此你声明了一个空数组并尝试在成功回调中返回该数组。

在你的控制器旁边

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


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

});

你应该使用$ scope变量声明citiesList inoder与模板联系。

你的HTML中的

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

现在这将有效。

我的简单Angularjs代码不显示结果

3 个答案: