Создание новых элементов HTML на основе данных JSON - Angular JS

Question

Я хочу создать динамические элементы HTML на основе данных JSON.Создан контроллер для получения данных.Создан флажок на основе типа с заголовком из массива содержимого.Но теперь мне нужно создать текстовое поле, когда я нажимаю на третий (чужой) флажок на основе массива onSelection. Любая идея, как это сделать, будет полезна

app.controller('ContentCtrll', function (MedService) {
var ctrll = this;
ctrll.content = [];
ctrll.fetchContent = function () {
    MedService.getMeds().then(function (result) {
        ctrll.content = result.data.book.contents;
    });
};
ctrll.fetchContent();
});

JSON

"book" : {

    "title" : "Action",
    "contents" : [
        {
            "title" : "Terminator",
            "type" : "CHECKBOX"
        },
        {
            "title" : "Predator",
            "type" : "CHECKBOX"
        },
        {
            "title" : "Alien",
            "type" : "CHECKBOX",
            "onSelection" : [
                {
                    "title" : "Total copies",
                    "type" : "TEXT"
                },
                {
                    "title" : "Sold copies",
                    "type" : "TEXT"
                }
            ]
        },
        {
            "title" : "Batman",
            "type" : "CHECKBOX",
            "onSelection" : [
                {
                    "title" : "",
                    "type" : "TEXT"
                }
            ]
        }
    ]
}

Answer 1

Я не уверен, что это то, о чем идет речь, но я ясно понимаю - вы хотите поставить текстовое поле после какого-то щелчка на третьем флажке на основе массива onSelection.Вы можете добавить оператор ng-if="", который проверяет, существует ли onSelection.Вот таблица HTML, в которой я перечислил все ваши данные JSON:

<table>
     <thead>
     <tr>
       <th>Book</th>
     </tr>
     </thead>
     <tbody>
     <tr ng-repeat-start="n in data">
        <td>
        <button ng-if="n.expanded_param" type="button" ng-click="expand_param(n);">-</button>
        <button ng-if="!n.expanded_param" type="button"  ng-click="expand_param(n);">+</button>
        </td>
       <td>{{n.book.title}}</td>
     </tr>
     <tr ng-if="n.expanded_param" ng-repeat-end="">
        <td colspan="100%">
             <div>
                <ul>
                  <li ng-repeat="name in n.book.contents" >
                     {{name.title}}    <br />
                     {{name.type}}    
                      <ul ng-if="name.onSelection">
                        <li ng-repeat="onSelection in name.onSelection">
                          <input type="text" placeholder="type text"/>
                           {{onSelection.title}} <br />
                           {{onSelection.type}}
                        </li>
                  </ul>
                  </li>
                  </ul>

                                        </div>
            </td>
     </tr>
</tbody>
</table>

И я поставил input только под onSelection Вот плункер: http://plnkr.co/edit/1nUm8f1tLMScsWkbc8Ko?p=preview