javascript - 如何将数组数据绑定(bind)到AngularJS中的下拉列表？

Question

嗨，我正在用 angularjs 开发 Web 应用程序。我正在尝试将数据绑定(bind)到 drodpown。我正在进行 ajax 调用以从服务器获取数据。我收到错误无法读取未定义的属性“长度”。我正在发出获取请求。这是我的 API。 http://192.168.0.213:1234/api/Customer/Nationalities

以上api将返回

{"status":"Success","msg":"Success","code":"200","data":[{"ID":1,"Nationality":"indian"},{"ID":2,"Nationality":"england"}]}

我使用 js 进行绑定(bind)，如下所示。

  var url = cfg.Baseurl;
            var nationality = new Array();
            $http.get(url + 'api' + '/Customer/' + 'Nationalities').success(function (data) {
                $.map(data.data.Nationality, function (item) {
                    nationality.push(item);
                    console.log(item);
                });
                $scope.nationalityList = nationality;
            }).error(function (status) {
            });

这是我的 html 代码。

   <select ng-model="user.nationality" id="brand" ng-options="user.nationality for user in nationalityList" required>
                            <option value="" label="Select">Select</option>
                        </select>

我最终遇到了无法读取未定义的属性“长度”错误。任何帮助，将不胜感激。谢谢。

Answer 1

这里是演示链接 Jsfiddle demo

JS代码

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

  app.controller('ctrl', function($scope) {
    $scope.nationalityList = {
      "status": "Success",
      "msg": "Success",
      "code": "200",
      "data": [{
        "ID": 1,
        "Nationality": "indian"
      }, {
        "ID": 2,
        "Nationality": "england"
      }]
    };
  });

** HTML **

  <div ng-app='myApp'>

    <div ng-controller='ctrl'>
      <select ng-model="user.nationality" id="brand" ng-options="user.Nationality for user in nationalityList.data" required>
        <option value="" label="Select">Select</option>
      </select>
      <span>nationality = {{user.nationality}}</span>
    </div>
  </div>

希望这对你有帮助