javascript - 使用嵌套的json在ng-options中解析对象的angularjs select下拉列表

我有以下json：

  [
{
    "normal" :{
        "font": "Burlington Script.ttf",
        "fontFamily": "sf_burlington_scriptregular",
        "fontName": "Burlington Script"
    },
    "bold" : {
        "font": "SF_Burlington_Script_Bold.ttf",
        "fontFamily": "sf_burlington_scriptbold",
        "fontName": "Burlington Script"
    },
    "italic" : {
        "font": "SF_Burlington_Script_Italic.ttf",
        "fontFamily": "sf_burlington_scriptitalic",
        "fontName": "Burlington Script"
    },
    "bold-italic": {
        "font": "SF_Burlington_Script_Bold_Italic.ttf",
        "fontFamily": "sf_burlington_scriptBdIt",
        "fontName": "Burlington Script"
    }

},

{
    "normal" :{
        "font": "Some_Script.ttf",
        "fontFamily": "Some_scriptregular",
        "fontName" : "Some Script"
    },
    "bold" : {
        "font": "Some_Script_Bold.ttf",
        "fontFamily": "Some_scriptbold",
        "fontName" : "Some Script"
    },
    "italic" : {
        "font": "Some_Script_Italic.ttf",
        "fontFamily": "Some_scriptitalic",
        "fontName" : "Some Script"
    },
    "bold-italic": {
        "font": "Some_Script_Bold_Italic.ttf",
        "fontFamily": "Some_scriptBdIt",
        "fontName" : "Some Script"
    }

}
]

我想做的是仅在“正常”下的下拉列表中显示fontName，其值是fontFamily。

我努力了

 <select
      ng-model="selectedFont"
      ng-options="fonts as fonts.normal.fontName for fonts in designFonts" required>
 </select>

但没有运气。我在控制器中将$ scope.designFonts设置为任何json。

最佳答案

您可以利用ng-option expression的select as部分来设置在选择选项时设置ng-model值所需的条件。因此fonts.normal.fontFamily as fonts.normal.fontName for fonts in designFonts并使用track by将选项值设置为各自的值（track by始终应用于value）。

尝试：-

  <select
     ng-model="selectedFont"
     ng-options="font as font.normal.fontName for font
                   in designFonts track by font.normal.fontFamily"
  required></select>

Demo

如果使用font.normal.fontFamily as font.normal.fontName，则将ng-model设置为各自的fontFamily，如果您需要将整个对象用作ng-model，则使用现在的方式。



好吧，这可能是ng-select的错误，尽管select as被应用，但您不能在同一字段上同时使用track by和ng-model，这会导致选择问题。因此，您可以使用：-

 ng-options="font as font.normal.fontName for font
                   in designFonts track by font.normal.fontFamily"

但是你不能

 ng-options="font.normal.fontFamily as font.normal.fontName for font
                   in designFonts track by font.normal.fontFamily"