angularjs: динамический html в зависимости от данных json

Я хочу показать содержимое моей модели json динамически, в зависимости от предоставленного json. Я использую ng-repeat для прокрутки моих данных и хочу отобразить html-шаблон для заполнения данными, зависящими от типа данных.angularjs: динамический html в зависимости от данных json

JSON

{ 
    "elements": [ 
     { 
      "type": "input-text", 
      "desc": "Full Name" 
     }, 
     { 
      "type": "input-checkbox", 
      "desc": "Accept Terms" 
     } 
    ] 
}

Это должно привести к различным HTML код, соответствующий заполненный с содержанием JSon.

E.g.

<div><label>Full Name</label> <input type="text"></div> 
<div><input type="checkbox"> <label>Accept Terms</label></div>

Прямо сейчас, что я делаю, это использовать angularjs директиву, чтобы создать элемент и добавить значения JSon в нужном месте. e.g. element.html('<div><input type="checkbox"> <label>' + scope.item.desc + '</label></div>') Это похоже на способ jquery (или, что еще хуже) сделать это, хотя я хочу сделать это «правильным» угловым способом.

Как я могу использовать другой шаблон HTML, заполненный содержимым, в зависимости от найденных данных JSON?

PS: Приведенный выше пример является простым, встречающиеся данные намного сложнее, чем переключение положения полей label и input.

источник

2015-03-27 Peter Kennedy

Вы можете использовать ресурс для получения json, если вы хотите использовать разные json, вы можете сделать только ... /: name.json. Кажется, вот правильный пример https://docs.angularjs.org/tutorial/step_08. –

http://onehungrymind.com/angularjs-dynamic-templates/ Это должно быть то, что вы хотите. –

Только для справки: Я знаю, как http.get() json, заполнить мою область действия и ngRepeat над элементами, только часть для использования разных блоков HTML (с данными) беспокоила меня. Спасибо @Huy за ссылку на вашу полезную статью, а также комментарии там очень помогают. –

Простое решение, кажется, использовать ngSwitch с различными HTML путями, например:

<div ng-switch="item.type"> 
    <div ng-switch-when="input-text"> 
     <div><label>{{item.desc}}</label> <input type="text"></div> 
    </div> 
    <div ng-switch-when="input-checkbox"> 
     <div><input type="checkbox"> <label>{{item.desc}}</label></div> 
    </div> 
    <div ng-switch-default>Unknown item.type: {{item.type}}</div> 
</div>

кажется подход, используя angularjs директиву (который я взял первый) может быть хорошим решением для сложных сценариев, как отмечает «Huy Hoang Pham» в своем блоге: http://onehungrymind.com/angularjs-dynamic-templates/ (спасибо!)

источник

2015-03-27 08:49:55

Все, что вам нужно сделать, это установить данные по охвату, а затем использовать ng-repeat directive в вашем HTML, чтобы вывести его:

Контроллер:

.controller('MyData', function ($scope) { 
    $scope.myModel = { 
     elements: [ { desc: .. }, .. ] 
    }; 
})

Вы бы с помощью $http service или какой-либо другой подходящий метод в этом контроллере для заполнения myModel данными, но в итоге данные должны быть в конечном итоге на объекте $scope. Тогда это задание шаблона для отображения этих данных:

<div ng-controller="MyData"> 
    <ul> 
     <li ng-repeat="element in myModel.elements"> 
      {{ element.desc }} 
     </li> 
    </ul> 
</div>

источник

2015-03-27 07:44:52 deceze

angularjs: динамический html в зависимости от данных json

ответ

Смежные вопросы