NG-IF ... ELSE - 更可讀的版本

Question

在我的網站我使用這樣的代碼：

span(class="item-org-panel-name", ng-repeat="org in organizationPath") 
    a(href="", ng-if="! $last") {{ org.Name }} 
    span(ng-if="$last") {{ org.Name }} 

因爲我需要顯示link集合的所有元素，我想顯示span而不是去年元件。

我不喜歡我的代碼becase的不是很明顯，這是一個可見的

Answer 1

您可以使用ng-switch和ng-switch-when

span(class="item-org-panel-name", ng-repeat="org in organizationPath", ng-switch="$last") 
    a(href="", ng-switch-when="true") {{ org.Name }} 
    span(ng-switch-default) {{ org.Name }} 

ngSwitch

Answer 2

你可以試試這個方法，使用指令：

app.directive('whatElementToUse', function($compile) { 
    return { 
    restrict: 'A', 
    scope: { 
     name: '=', 
     showAsSpan: '=' 
    }, 
    link: function(scope, elm, attr) { 
     var tamplate = ''; 
     template = scope.showAsSpan ? '<span>{{name}}</span>' : '<a href="">{{name}}</a>'; 
     elm.html(template); 
     $compile(elm.contents())(scope); 
    } 
    } 
}) 

HTML：

<div ng-repeat="org in main.data" what-element-to-use name="org.name" show-as-span="$last"></div> 

plnkr