angularjs的ng选项中的解析对象使用嵌套json选择下拉菜单

Parsing object in ng-options for angularjs select drop down using nested json

本文关键字：嵌套 json 选择 下拉菜单 选项 ng angularjs 对象      更新时间：2023-09-26

我有以下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"
    }
}
]

我想做的是在下拉菜单中只显示"normal"下的fontName，并且值为fontFamily。

我试过

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

但没有运气。我正在将控制器中的$scope.designFonts设置为json是什么。

您可以使用ng选项表达式的select as部分来设置在选择选项时设置ng模型值所需的内容。因此fonts.normal.fontFamily as fonts.normal.fontName for fonts in designFonts并使用track-by将选项值设置为相应的值（track-by始终应用于值）。

尝试：-

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

演示

如果您使用font.normal.fontFamily as font.normal.fontName将使用相应的fontFamily设置ng模型，如果您需要整个对象作为ng模型，则使用现在的方式。

好吧，可能有一个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"
相关文章：