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>
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屋!