如何将Angular js ngOptions与自定义属性一起使用 [英] How to use Angular js ngOptions with custom attributes
本文介绍了如何将Angular js ngOptions与自定义属性一起使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用Angular.js填充带有一些自定义值的下拉列表 ngOptions
I want to populate a dropdown list with a few custom values using Angular.js ngOptions
例如: -
<option value="' + info[x].CountryCode
+ '" data-image="images/msdropdown/icons/blank.gif"
data-imagecss="flag ' + info[x].CountryCode
+ '" data-title="'
+ info[x].CurrencyName + '" >'
+ info[x].CurrencyCode + '
</option>
以下是JSON格式的数据:
Following is the data in JSON format :
[{
"Id": 3,
"CountryName": "Australia",
"CountryCode": "au",
"CurrencyCode": "AUD",
"CurrencyName": "Australian Dollar",
"CurrencyValue": 0.018,
"PayPalCountryCode": 12,
"PayPalCurrencyCode": 78,
"IsActive": true
},
{
"Id": 19,
"CountryName": "Taiwan",
"CountryCode": "tw",
"CurrencyCode": "TWD",
"CurrencyName": "New Taiwan Dollar",
"CurrencyValue": 0.48,
"PayPalCountryCode": 208,
"PayPalCurrencyCode": 148,
"IsActive": true
},
{
"Id": 2,
"CountryName": "United States",
"CountryCode": "us",
"CurrencyCode": "USD",
"CurrencyName": "US Dollar",
"CurrencyValue": 0.016,
"PayPalCountryCode": 225,
"PayPalCurrencyCode": 125,
"IsActive": true
}]
我是Angular的新手,有人可以告诉我如何使用 ngOptions 执行此操作?
I am new to Angular, could someone show me how to do this using ngOptions ?
推荐答案
根据Angular ng-options文档,没有自定义属性支持。所以使用ng-repeat指令来实现你的选择框
As per Angular ng-options documentations there are no custom attributes support. so use ng-repeat directive to achieve your select box
<select ng-model="countrySelected" ng-change="countryChange()">
<option ng-repeat="country in countries" value="{{country.CountryCode}}"
data-image="images/msdropdown/icons/blank.gif"
data-imagecss="flag {{country.CountryCode}}"
data-title="{{country.CurrencyName}}">{{country.CurrencyCode}}</option>
</select>
您通过ng-model获得所选值。 countrySelected存储您选择的值。
you get the selected value through ng-model. countrySelected stores your selected value.
在您的控制器中
$scope.countryChange = function(){
// write your related code
}
这篇关于如何将Angular js ngOptions与自定义属性一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文