Question

我建立了一个功能，即使用基本角度将“和僵尸”添加到所选择的书名中。

         <input type="text" ng-model="bookname" onclick="zombies()"> 
            <h1> {{bookname}} </h1>

我希望仅当输入中包含文本时才显示“和僵尸”（以及输入中插入的文本）。

我尝试将此作为开始，只是使用JS调用角度，这是行不通的。

      <script>
    function zombies() {
    document.getElementsByTagName("h1").innerHTML = "{{}}" + "and zombies";
    };
    </script>

当输入中有文本时，如何显示文本？（请放心，我一个人学习，你们都是从小辈开始的）

Answer 1

您只需要添加条件即可检查bookname的值并使用您的姓名显示静态内容。

像这样-

<input type="text" [(ngModel)]="bookname" (click)="zombies()"> 
<h1> {{bookname}} <span *ngIf='bookname'>and zombies</span> </h1>

Answer 2

您可以在此处使用条件。

<input type="text" [(ngModel)]="bookname" onclick="zombies()"> 
<h1 *ngIf="bookname"> {{bookname}} and zombies</h1>

或者如果您想使用javascript：

<input type="text" ng-model="bookname" onclick="zombies()"> 
<h1 id="txtheading"></h1> 

function zombies() {
    var heading_value = document.getElementById("txtheading").value;
    document.getElementById("txtheading").innerHTML = heading_value  + " and zombies";
};

Answer 3

您不需要onclick函数ng-model的最简单解决方案将自动运行。

AngularJs：

<input type="text" ng-model="bookname">
<h1>{{(bookname)? bookname+' and zombies' : bookname}}</h1>

角度2/4/5/6：

<input type="text" [(ngModel)]="bookname">
<h1>{{(bookname)? bookname+' and zombies' : bookname}}</h1>

按条件显示/隐藏角度元素

3 个答案: