如何将数组数据绑定到angularjs的下拉列表中？

Question

嗨我正在angularjs中开发web应用程序。我正在尝试将数据绑定到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绑定如下返回。

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> 

希望这将帮助你

Answer 2

希望这有助于：

使用$scope.anArray =[];

绑定从$http响应的数据阵列。

Angular js How to populate dropdown with JSON without ng-options

例子： http://plnkr.co/edit/evQJAKvMnl4btz4BZeuP?p=preview

我相信你是使用JSON对象响应。

Answer 3

在这种情况下，它没有必要映射，它只分配th该阵列

var url = cfg.Baseurl; 
var nationality = []; 
$http.get(url + 'api' + '/Customer/' + 'Nationalities') 
.success(function (data) { 
    if(data.data) { 
     // Here the value is assigned 
     $scope.nationalityList = data.data; 
    } 
}).error(function (status) { }); 

电子价值和你的HTML必须是这样的

<select 
    ng-model="selectedNationality" 
    id="brand" 
    ng-options="item.Nationality for item in nationalityList" 
    required> 
    <option value="" label="Select">Select</option> 
</select> 
<!-- Showing selected option --> 
<p ng-if="selectedNationality">Selected option: {{selectedNationality}}<p/> 

欲了解更多信息https://docs.angularjs.org/api/ng/directive/ngOptions

Answer 4

因为$scope.nationalityList没有初始化，它在时间当视图未定义正在呈现。因此错误Cannot read property 'length' of undefined error.。

只要初始化变量为空数组将解决这一错误。

Answer 5

$.map(data.data.Nationality, function (item) { 
        nationality.push(item); 
        console.log(item); 
       }); 

data.data.Nationality是无效的，因为data.data是一个数组，而不是反对 那么，国籍= data.data 将做工精细