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

问题描述：

嗨我正在angularjs中开发web应用程序。我正在尝试将数据绑定到drodpown。我正在调用ajax来从服务器获取数据。我收到错误无法读取未定义的属性“长度”。我正在取得请求。这是我的api。 http://192.168.0.213:1234/api/Customer/Nationalities 如何将数组数据绑定到angularjs的下拉列表中？

以上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>

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

在你的控制器，你可以试试你的初始化数组到一个空数组.. ..'$ scope.nationalityList = []' – mridula

答

这里是演示链接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>

希望这将帮助你

答

希望这有助于：

使用$scope.anArray =[];

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

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

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

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

答

在这种情况下，它没有必要映射，它只分配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/>

答

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

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

答

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

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

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

相关推荐