Что-нибудь вроде ссылок на шаблоны в AngularJS?
Я пытаюсь создать форму, макет которой полностью управляется данными.
Пример источника данных:
{
title : "Form Test",
fields : [{
name : "FieldA",
type : "string",
value : "initial value"
}, {
name : "FieldB",
type : "selection",
options : ["1", "2", "3"],
value : "2"
}, {
name : "FieldC",
type : "struct",
value :
[{
name : "FieldC1",
type : "string",
value : "initial value"
}, {
name : "FieldC2",
type : "string",
value : "initial value"
}
]
}
]
}
Я думаю, что я могу использовать ng-repeat и ng-switch для выбора элемента формы в зависимости от типа, но я зацикливаюсь, когда дело доходит до этого рекурсивно, когда я доберусь до 'FieldC'.
<span ng-switch on="field.type">
<div ng-switch-when="string">STRING: {{field.value}}</div>
<div ng-switch-when="selection">SELECTION: {{field.value}}</div>
<div ng-switch-when="struct">STRUCT: ????</div>
<div ng-switch-default>DEFAULT:{{field.value}}</div>
</span>
По сути, я хочу, чтобы при столкновении с "struct" он рекурсивно применял ng-switch к полям struct? Есть ли способ "ссылаться" на шаблон, чтобы его можно было использовать в нескольких местах на одной странице? По-видимому, поддержка "частичных" шаблонов должна быть скоординирована на стороне сервера через маршруты, которые здесь кажутся излишними. Это то, что мне нужно, чтобы начать копаться в создании моих собственных директив?
EDIT Я просто наткнулся на этот, который выглядит так, будто у него есть достойная возможность делать то, что я хочу (I пока еще не проверили его правильно), то есть в правильном направлении?
Ответы
Ответ 1
Вам нужно создать директиву, которая берет данные такого типа и формирует из нее форму.
Способ обработки рекурсии - рассматривать каждый уровень, включая верхний уровень, как другую структуру. Я построил версию здесь: http://jsfiddle.net/U5Kyp/9/
Убедитесь, что вы прочитали директиву в документах, чтобы понять, что происходит: http://docs.angularjs.org/guide/directive
Ответ 2
Вот обновление принятого ответа для angular.js 1.0.1 В стабильной версии было несколько несовместимых изменений:
- ng-app теперь требуется директива
Изменен синтаксис и семантика области
http://jsfiddle.net/9qAfM/1/
Ответ 3
По-моему, это плохой результат внутреннего эффекта платформы. Цитируя википедию: "тенденция архитекторов программного обеспечения создавать систему, настраиваемую так, чтобы стать репликой, а часто и плохими репликами платформы разработки программного обеспечения, которую они используют".
У AngularJS уже есть мощный механизм для перемещения дерева объектов и создания из него стека областей и контроллеров. Вы можете утверждать, что это точно, что AngularJS IS.
Если вы вынуждены создавать формы из такого отвратительного JSON, я думаю, что самый простой способ - превратить их в HTML (с помощью простого языка шаблона любого типа, стороне сервера или клиента), а затем используя $компилировать сервис, чтобы превратить их в приложение с угловым выражением.