Question

我试图在IONIC2中动态创建离子标签。

我可以使用HTML DOM

通过以下代码在JavaScript / Typescript中实现此目的

  var iDiv = document.createElement('input');
     iDiv.id="lbl2";
iDiv.setAttribute("type","text");
iDiv.setAttribute("style", "background-color: transparent;");
iDiv.setAttribute('width','400px')
iDiv.setAttribute('height','1000px')
 iDiv.setAttribute("value","");
iDiv.setAttribute("placeholder","Label2 placeholder");
document.getElementById('billerdiv').appendChild(iDiv);

以上代码创建基本HTML输入... 外观和感觉不是Upto离子离子标签...

要在HTML端创建离子标签和离子输入，我们将遵循。

  <ion-item>
    <ion-label>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

如何在JavaScript / Typescript中动态创建它。??

Answer 1

我担心为了做到这一点，你必须创建当你将html代码添加到你的页面时Ionic生成的html标记。所以当你添加

<ion-item>
  <ion-label>Username</ion-label>
  <ion-input type="text"></ion-input>
</ion-item>

在您的页面中，在渲染后，该代码将转换为：

<ion-item class="item item-input">
    <div class="item-inner">
        <div class="input-wrapper">
            <ion-label id="lbl-0">Username</ion-label>
            <!--template bindings={}-->
            <ion-input type="text">
                <input class="text-input ng-untouched ng-pristine ng-valid" type="text" placeholder="" aria-labelledby="lbl-0" autocomplete="off" autocorrect="off">
                <!--template bindings={}-->
                <button class="text-input-clear-icon button button-clear" clear="" type="button" hidden=""><span class="button-inner"></span>
                    <ion-button-effect></ion-button-effect>
                </button>
                <!--template bindings={}-->
            </ion-input>
        </div>
    </div>
    <ion-button-effect></ion-button-effect>
</ion-item>

因此，使用document.createElement('ion-item');创建标记，然后设置类（使用element.className = ...;）并附加子项（使用element.appendChild(anotherElement);，即使可能，也将是一场噩梦。

我可以问你为什么要用dinamically创建这个标签？也许我们可以通过使用Angular 2方法找到一种方法，我们可以避免这样做。

动态创建离子标签

1 个答案: