Angular js如何使用不带ng-options的JSON填充下拉列表 [英] Angular js How to populate dropdown with JSON without ng-options

问题描述

我以这种方式填充下拉列表，并且数据即将到来，但是第一次显示下拉列表时没有选择任何数据.这是我的代码.请看看并告诉我我在哪里弄错了.

 < div ng-controller ="DemoCtrl" ng-app ="main">< select ng-model ="selectedCountry">< option value =">选择帐户</option>< option ng-repeat ="choiceCountries中的项目" value ="item.countryId">{{item.countryId}}-{{item.name}}</option></select>< span>所选国家/地区ID是{{selectedCountry.countryId}}</span></div>var app = angular.module('main'，[]);app.controller('DemoCtrl'，函数($ scope){$ scope.chooseCountries = [{countryId:1，名称:法国-大陆"，desc:某些描述")}，{countryId:2，名称:直布罗陀"，desc:某些描述"}，{countryId:3，名称:马耳他"，desc:某些描述"}];$ scope.selectedCountry = $ scope.chooseCountries [0] .countryId;}); 

解决方案

更好的方法是使用 ng-options 指令.

 < select ng-model ="selectedCountry"ng-options ="country.countryId作为(country.name +'-'++ country.desc)表示choiceCountries中的国家/地区"></select> 

此处演示

---

为什么 ng-repeat 方法不起作用?(仅供说明，不建议使用)

您应使用 countryId 正确填充选项 value 属性，例如 value ="{{item.countryId}}"

 < select ng-model ="selectedCountry">< option value =">选择帐户</option>< option count-count中的ng-repeat ="item" value ="{{{item.countryId}}">{{item.countryId}}-{{item.name}}</option></select> 

但是上面的方法不适用于您的情况，因为当 option 将该值分配给 value 属性时，您有 countryId 字段为数字格式它将转换为 string 格式.因此，在初始加载时，您不会看到 countryId 被绑定到选择框.比较将发生，例如 2 ==="2" 不会是 true ，因此即使您在 ng-model中提供了选择框，也不会选择值.

您可以在 此处的插件 中找到问题>

因此，要解决此问题，您需要通过像下面这样调用 toString 方法，将该 number 值转换为 string 值

 <代码> $ scope.selectedCountry = $ scope.chooseCountries [0] .countryId.toString(); 

通过执行上述更改，选择框会在下拉菜单中选择提供的 countryId 值，因为发生了比较.true "2" ==="2"

这就是为什么使用ng-options会更好，因为它确实保留了值 datatype .基本上，它们的工作不会损害值的数据类型.

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

i populate drop down this way and data is coming but no data has been selected when dropdown shown first time. here is my code. please have a look and tell me where i made the mistake.

<div ng-controller="DemoCtrl" ng-app="main">
<select ng-model="selectedCountry">
<option value="">Select Account</option>
<option ng-repeat="item in chooseCountries" value="item.countryId">
  {{item.countryId}}-{{item.name}}
</option>    
</select>  

<span>Selected country id is {{selectedCountry.countryId}}</span>   
</div>

var app = angular.module('main', []);
app.controller('DemoCtrl', function ($scope) {

    $scope.chooseCountries=[
        {countryId : 1, name : "France - Mainland", desc: "some description" },
        {countryId : 2, name : "Gibraltar", desc: "some description"},
        {countryId : 3, name : "Malta", desc: "some description"}
    ];

    $scope.selectedCountry = $scope.chooseCountries[0].countryId;
});

解决方案

More better way to go for it would be using ng-options directive.

<select ng-model="selectedCountry" 
  ng-options="country.countryId as (country.name+'-'+country.desc) for country in chooseCountries">
</select>

Demo here

---

Why ng-repeat approach wouldn't work?(Just for explanation, not recommending to use)

You should fill option value attribute with countryId correctly like value="{{item.countryId}}"

<select ng-model="selectedCountry">
   <option value="">Select Account</option>
  <option ng-repeat="item in chooseCountries" value="{{item.countryId}}">
    {{item.countryId}}-{{item.name}}
  </option>    
</select>  

But above will not work for your case because you had countryId field is in number format, when option assign that value to value attribute it gets converted to string format. So on initial load you wouldn't see countryId gets binded to select box. comparison will occur like 2==="2" wouldn't be true, so select box would not select value, even if you provided in ng-model.

You can find the problem plunkr here

So for fixing it you need to convert that number value to string value by calling toString method over it like below

$scope.selectedCountry = $scope.chooseCountries[0].countryId.toString();

By doing above change select box does select provided countryId value in dropdown because of comparison occurs true "2"==="2"

That's why using ng-options would be better, which does preserve value datatype. Basically they worked without harm the datatypes of value.

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

这篇关于Angular js如何使用不带ng-options的JSON填充下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！