angezeigte Link bedingt in Angularjs

Question

Grundsätzlich habe ich diesen Code in meiner Vorlage:

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

Wie Sie sehen, ich versuche, eine anklickbare URL angezeigt wird, wenn entry.url nicht leer und ein Klartext nichts anderes ist . Es funktioniert gut, aber es sieht ziemlich hässlich aus. Gibt es eine elegantere Lösung?

Eine andere Möglichkeit, die ich denken kann, es zu tun ist mit 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> 

Aber dann würde ich zweimal fast den gleichen Vergleich wiederholen, was noch schlimmer aussieht. Wie würdest du das angehen?

Answer 1

Sie können es versuchen.

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

Aber die ngSwitch, die Sie verwenden, sollte in Ordnung sein.

Answer 2

Ich würde empfehlen, eine ng-Klasse mit = "{ 'classname': whenEntryURLisWhatever}" in Ihrem td, und machen es die CSS-Stile ändern zugegriffen, zB:

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

Dann einfach ändern, was passiert, auf Klicken Sie mit der linken Maustaste auf eine Funktion, die in Ihrem JavaScript-Code definiert ist.

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

auf Codewiederholung abgeholzt Dies würde, wie jetzt Ihr html sein könnte:

<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

Verwenden doppelte Negation, es warf in boolean so !!entry.urltrue zurück, wenn der String nicht leer ist.

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

Ein gutes lesen What is the !! (not not) operator in JavaScript? und Double negation (!!) in javascript - what is the purpose?

Answer 4

Sie eine benutzerdefinierte Richtlinie erstellen können, die die Komplexität verbirgt:

HTML

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

JS