Wyświetlanie Link warunkowo w angularjs

Question

Zasadniczo mam ten kod w moim szablonu:

<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> 

Jak widać Próbuję wyświetlić klikalny URL kiedy entry.url nie jest pusty i czysty tekst inaczej . Działa dobrze, ale wygląda dość brzydko. Czy istnieje bardziej eleganckie rozwiązanie?

Innym sposobem mogę myśleć robi to przy użyciu 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> 

Ale wtedy byłoby powtórzenie tego samego porównania prawie dwukrotnie, co wygląda jeszcze gorzej. Jak byś się do tego zbliżyła?

Answer 1

Możesz spróbować.

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

Ale ngSwitch których używasz powinny być w porządku.

Answer 2

Polecam mającą NG-class = "{ 'className': whenEntryURLisWhatever}" w swoim td, i uczynić go zmieniać style css dostępne, np:

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

Następnie wystarczy zmienić to, co dzieje się na ng-kliknij w funkcji zdefiniowanej w kodzie javascript.

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

Byłoby to obniżyć kodu powtórzenia, jak Twój html mógłby teraz być:

<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

Zastosowanie podwójnej negacji, to wrzucony do logiczną zatem !!entry.url powróci true czy łańcuch nie jest pusty.

<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> 

Dobrym czytać What is the !! (not not) operator in JavaScript? i Double negation (!!) in javascript - what is the purpose?

Answer 4

Można tworzyć niestandardowe dyrektywę, która ukrywa złożoność:

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>' 

    } 
});