Разбор объекта в ng-options для выпадающего списка angularjs с использованием вложенного 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"
    }

}
]

то, что я хочу сделать, это отобразить fontName в раскрывающемся списке только под «нормальным» и иметь значение fontFamily.

я пытался

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

но не повезло. я устанавливаю $scope.designFonts в своем контроллере на любой json.


javascript angularjs angularjs-ng-model angularjs-ng-options
person Yeak    schedule 15.10.2014    source источник
comment
Вы имеете в виду, что ng-модель должна быть семейством шрифтов? plnkr.co/edit/AydiOR?p=preview   -  person PSL    schedule 15.10.2014
comment
Используйте это JSFiddle в качестве руководства.   -  person Nikolay Melnikov    schedule 15.10.2014
comment
Нет значения параметра, я хочу, чтобы для него было установлено значение fontName, поэтому в раскрывающемся списке должен отображаться Burlington Script, а значение параметра должно быть sf_burlington_scriptregular, а не просто 0 1 ...   -  person Yeak    schedule 15.10.2014
comment
plnkr.co/edit/2vj4PK?p=preview   -  person user730009    schedule 15.03.2016

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать часть select as выражения ng-option, чтобы установить, что вам нужно установить значение ng-модели при выборе опции. Итак, fonts.normal.fontFamily as fonts.normal.fontName for fonts in designFonts и используйте отслеживание, чтобы установить значение параметра с соответствующим значением (отслеживание всегда применяется к значению).

Пытаться:-

  <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, установите 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"
person PSL    schedule 15.10.2014
comment
не могли бы вы сказать мне, как я могу установить выбранный по умолчанию шрифт. $scope.selectedFont возвращает объект этого шрифта, который великолепен, но когда я пытаюсь установить $scope.selectedFont при загрузке страницы в качестве одного из значений fontFamily, он, похоже, не работает - person Yeak; 15.10.2014