Angularjs - 动态元素/模板

时间:2017-02-02 10:43:49

标签: angularjs angularjs-directive

我试图找出创建动态元素的最佳方法。

基本上,我有一个多选列表,例如......

Item 1
Item 2
Item 3

一旦选择了一个或多个,它需要为这些选择生成元素,例如......

Item 1
Name: ....
Quantity: ....

向视图添加插入。我需要在视图中定义所有这些隐藏元素吗?

或者我应该使用指令吗?如果你能指出我正确的方向,将不胜感激!

1 个答案:

答案 0 :(得分:1)

只需使用ng-repeatng-show / ng-if的组合。

<div ng-repeat="item in list" style="margin-top:10px">
    <input type="checkbox" ng-model="item.selected">Item {{$index + 1}}
    <div style="margin-left:30px" ng-show="item.selected">
        <div>Name: {{item.name}}</div>
        <div>Quantity: {{item.quantity}}</div>
    </div>
</div>

https://plnkr.co/edit/Mvydk1CMG8PM7LTmI57R?p=preview