基于JSON数据创建新的HTML元素-Angular JS

Question

我想基于JSON数据创建动态html元素。创建了一个控制器来获取数据。根据内容数组中具有标题的类型创建了复选框。但现在，当我点击基于onSelection数组的第三个(Alien(复选框时，我需要创建文本框。任何如何做的想法都将有助于

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下面以下是plunker：http://plnkr.co/edit/1nUm8f1tLMScsWkbc8Ko?p=preview