kątowa, ng-jeśli chcesz zmienić tekst?

Question

Jestem biorąc pod uwagę następujący kod

<h2>{{ownername}} Online Bookshop</h2> 
<input placeholder="type your name" ng-model="ownername" > 

które wyjścia 'Online Bookshop'

i gdybym input 'Fred' wyprowadza 'Fred Online Bookshop'

Bez jQuery, i robi rzeczy w kanciasty sposób, w jaki sposób mogę zmienić kod tak, aby dodawano apostrof i dzierżawę, gdy wejście nie jest puste?

EG

Online Bookshop, gdy wejście jest puste, a

Freda Online Bookshop gdy wejściowy zawiera 'Fred' string

Answer 1

Pamiętaj, że zakres jest tylko miejscem, gdzie można oceniać rzeczy. Więc to jest dokładnie to, co możemy zrobić. ? jest trójskładnikowych operatora w postaci: (expression)?<true clause>:<false clause>; i jest równa:

if(expression) { <true clause>; } 
else { <false clause>; } 

Zmodyfikowany kod:

<h2>{{ ownername.length ? ownername + "'s " : "" }}Online Bookshop</h2> 
<input placeholder="type your name" ng-model="ownername" > 

Edit: Nawet jeśli to działa, jej chyba lepiej jak inni podkreślają, aby ukryć logikę przed widokiem. Można to zrobić, wywołując funkcję zasięgu lub stosując filtr do zmiennej, aby przekształcić ją zgodnie z oczekiwaniami.

Answer 2

Użyj filtra!

app.filter('possessive', function() { 
    return function(val) { 
    if (!val) return ''; 
    return val + '\'s'; 
    }; 
}); 

Następnie:

<h2>{{ ownername | possessive }} Online Bookshop</h2>