如何将Angular js ngOptions与自定义属性一起使用

How to use Angular js ngOptions with custom attributes

本文关键字：自定义属性 一起 ngOptions Angular js      更新时间：2023-09-26

我想使用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格式的数据：

[{
    "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吗？

根据Angular ng选项文档，不支持自定义属性。所以使用ng重复指令来实现你的选择框

<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模型获得选定的值。countrySelected存储您选择的值。

在您的控制器中

$scope.countryChange = function(){
// write your related code
}
相关文章：