在angularjs NG选项解析对象选择下拉使用嵌套JSON [英] Parsing object in ng-options for angularjs select drop down using nested json

问题描述

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

}
]

我想要做的是在下拉显示的字体名称下的正常仅下跌并具有价值fontFamily中。

what i want to do is display the fontName in the drop down under "normal" only and have the value be fontFamily.

我曾尝试

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

但没有运气。我设置$ scope.designFonts在我的控制器无论JSON是。

but no luck. i am setting $scope.designFonts in my controller to whatever the json is.

推荐答案

您可以利用选择为中的 NG选项前pression 设置您需要设置NG-模式的价值时，一个选项是什么选中。因此， fonts.normal.fontFamily作为fonts.normal.fontName在designFonts字体并使用跟踪由有相应的值（设置选项值的按部就班地进行，是总应用于值的）。

You can utilize the select as part of the ng-option expression to set what you need to set the value of the ng-model when an option is selected. So fonts.normal.fontFamily as fonts.normal.fontName for fonts in designFonts and use a track by to have the option value set with respective value (track by is always applied to 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为font.normal.fontName 将设置NG-模型与各自的fontFamily中，如果您需要整个对象为NG-模型，则用你现在的方式。

If you use font.normal.fontFamily as font.normal.fontName will set ng-model with the respective fontFamily if you need the entire object as ng-model then use the way you have now.

那么有可能是一个有NG-选择错误，你不能使用选择为与按轨道一起上这会导致问题的选择，虽然同场NG-模型被应用。所以，你可以使用： -

Well there is a possibly ng-select bug, you cannot use select as with track by together on the same field which causes issue in selection, though ng-model gets applied. So you could use:-

 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" 

这篇关于在angularjs NG选项解析对象选择下拉使用嵌套JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！