Question

我有一个页面，我们从后端使用angular $ http获取用户列表，如下所示。

myApp.controller("MyCntrl", function ($scope, $http) {
   $scope.users= [];
   $scope.countries = function () {
        $http.get(url).success(function (data, status, headers, config) {
            return data;
        });
    };

   $scope.getUsers = function () {
        $http.get(url).success(function (data, status, headers, config) {
            $scope.users= data;
        });
    };
});

我的HTML就像：

<div ng-app="myApp" ng-controller="MyCntrl" ng-init="getUsers()">
  <p ng-repeat="user in users">{{user.UserName}}</p>

  <select>
      <option ng-repeat="country in countries">{{country.CountryName}}</option>
  </select>
</div>

一切正常，直到显示用户。

但用户ng-repeat后的代码无效。我无法在下拉列表中看到国家/地区列表。我可以在firebug中看到用户和国家的json列表。任何人都可以帮我吗？

我的国家Json

[{CountryId:1,CountryName:"India"}]

我观察到的是，在第一次重复用户之后，角度代码无法正常工作。当我试图看到国家json的长度时

<p>{{countries.length}}</p>

只是在浏览器中打印{{countries.length}}

Answer 1

在HTML5 Empty Web Apps：

的情况下，您必须使用ng-options

<select>

修改：

替换它：

<select ng-model="selectedCountry" ng-options="country.countryName for country in countriesData"> </select>

由此：

$scope.countries = function () { $http.get(url).success(function (data, status, headers, config) { return data; }); };

注意：已检查$http.get(url).success(function (data, status, headers, config) { $scope.countriesData = data; });已定义！

Answer 2

您可以为$scope.countries设置$scope.users的返回数据，除非您不需要定义在视图中调用的函数< / em>获取所有国家/地区。

相反，在控制器中调用此函数，然后将countries变量设置为范围：

this.getCountries = function () { $http.get(url).success(function (data, status, headers, config) { $scope.countries = data; }); }; // call the method to get the countries this.getCountries();

请注意，在您的代码中，您有return = data，这可能会导致语法错误。

Answer 3

你在ng-repeat中有调用函数，这就是它无法正常工作的原因。正确的代码应该如下所示

myApp.controller("MyCntrl", function ($scope, $http) {
    $scope.users= [];
    $scope.getCountry = function () {
        $http.get(url).success(function (data, status, headers, config) {
          $scope.countries = data;
       });
    };

    $scope.getUsers = function () {
        $http.get(url).success(function (data, status, headers, config) {
           $scope.users= data;
           $scope.getCountry();
        });
    };
});

ng-repeat后AngularJS代码无法正常工作

3 个答案: