ng如果..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。

我不喜欢我的代码，因为它不明显是可见的一个

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

ng切换

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