Visualizzazione collegamento condizionale in Angular.js

Question

Fondamentalmente, io ho questo codice nel mio modello:

<tr ng-repeat="entry in tableEntries"> 

    <td ng-switch="entry.url == ''"> 
    <span ng-switch-when="false"><a href="{{entry.url}}">{{entry.school}}</a></span> 
    <span ng-switch-when="true">{{entry.school}}</span> 
    </td> 

    ... 
</tr> 

Come potete vedere sto cercando di visualizzare un URL cliccabile quando entry.url non è vuoto e un testo normale altrimenti . Funziona bene, ma sembra abbastanza brutto. C'è una soluzione più elegante?

Un altro modo che posso pensare di farlo sta usando ng-if:

<td> 
    <span ng-if="entry.url != ''"><a href="{{entry.url}}">{{entry.school}}</a></span> 
    <span ng-if="entry.url == ''">{{entry.school}}</span> 
</td> 

Ma poi mi sarebbe ripetere quasi lo stesso confronto due volte, che sembra ancora peggio. Come vorresti che ti avvicinassi a questo?

Answer 1

Puoi provare.

<div ng-show="!link">hello</div> <div ng-show="!!link"><a href="{{link}}">hello</a></div>

Ma la ngSwitch cui si utilizza dovrebbe andare bene.

Answer 2

Consiglierei visto un ng-class = "{ 'className': whenEntryURLisWhatever}" nel vostro td, e renderlo cambiare gli stili CSS accessibile, ad esempio:

td span{ /*#normal styles#*/ } 
.className span{ /*#styles in the case of added classname (when it is a link)#*/ 
      text-decoration: underline; 
      cursor: pointer; 
} 

Poi basta cambiare ciò che accade sulla ng-clic all'interno di una funzione definita nel tuo codice javascript.

$scope.yourFunction = function(url){ 
    if(!!url){ 
     window.location = YourURL; 
    } 
} 

Questo sarebbe abbattuto sulla ripetizione del codice, come tuo html potrebbe ora essere:

<tr ng-repeat="entry in tableEntries"> 
    <td ng-class="{'className': !!entry.url}"> 
    <span ng-click="yourFunction(entry.url)">{{entry.school}}</span> 
    </td> 
    ... 
</tr> 

Answer 3

Usa doppia negazione, è gettato nel booleana quindi !!entry.url restituirà true se la stringa non è vuota.

<td ng-switch="!!entry.url"> 
    <span ng-switch-when="true"><a href="{{entry.url}}">{{entry.school}}</a></span> 
    <span ng-switch-when="false">{{entry.school}}</span> 
</td> 

una buona lettura What is the !! (not not) operator in JavaScript? e Double negation (!!) in javascript - what is the purpose?

Answer 4

È possibile creare una direttiva personalizzato che nasconde la complessità:

HTML

<tr ng-repeat="entry in tableEntries"> 
    <td> 
    <link model="entry"></link> 
    </td> 
    ... 
</tr> 

JS

app.directive('link', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      model: '=' 
     }, 
     template: '<a ng-if="model.url != ''" href="{{model.url}}">{{model.school}}</a><span ng-if="model.url == ''"> {{ model.school }}</span>' 

    } 
});