Показать / скрыть угловой элемент по условию

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

Самое простое решение, вам не нужна функция 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>

Answer 3

Вы можете использовать условие здесь.

<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";
};