Question

我希望用户能够使用ionic 2 / angular添加用户输入等元素。例如，使用普通的JS，我会使用这段代码：

function addDestination(){
        var destDiv = document.getElementById('destPlaceholder');
        destDiv.innerHTML += '<ul class="rounded"><li><input type="text" class="node" placeholder="text" id="d" /></li></ul>';  
    }

我将如何使用ionic2 / angularJS进行此操作？

Answer 1

在Ionic2 / Angular2中，您可以在页面/组件的模板（html）中使用ngFor指令为数组中的每个项目呈现HTML元素。

在你的打字稿中，你只需将一个元素推送到这个数组，它就会被渲染为ngFor的额外元素。

代码：

在你的模板中：

<ul class="rounded">
    <li *ngFor="let item from items">
        <input type="text" class="node" placeholder="{{item.someattribute}}" id="{{item.id}}" />
    </li>
</ul>

打字稿中的

：

public items:any[] = [];

addDestination() {
    this.items.push({id: 1, text: "the item's text"});
}

绝对看看https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

如何在ionic2 / angularJS中动态添加元素

1 个答案: