根据条件显示 href 的优雅方式

Question

我必须显示一个 <a> 标签。但是根据一个值是否存在，我需要设置 href.

这是我的：

<a ng-show="source.element!=0" "href="#/resource/{{source.a}}/{{source.b}}/val">
     {{source.element}})
</a>
<a ng-show="source.element==0" "href="">{{source.element}}</a>

如果 source.element 是 0 ，那么点击 source.element (href="")

的值应该不会发生任何事情

否则，页面必须根据href重定向。

有没有更好的方法，因为这会重复代码？

谢谢..

Answer 1

在范围内创建一个方法

$scope.getUrl = function(source){
  return source.element==0 ? '#' :  '#/resource/'+source.a+'/'+source.b+'/val';
}

然后从视图调用

<a ng-href="{{getUrl(source)}}">
     {{source.element}})
</a>

对于 angular 标记，最好使用 ngHref .

因为如果用户在 angular 加载之前点击 href，它会转到错误的地址。

Answer 2

您可以使用ng-if

<div ng-if="source.element!=0"><a ng-href="your-url">{{sourceElement}</a></div>
<div ng-if="source.element==0"><a ng-href="">{{sourceElement}}</a></div>

ngif Documentation

Answer 3

使用ng-switch减少watch数量和代码重复：

<span ng-switch="source.element">
    <a ng-switch-when="0">
        {{source.element}}
    </a>
    <a ng-switch-default ng-href="#/resource/{{source.a}}/{{source.b}}/val">
        {{source.element}}
    </a>
</span>

Answer 4

在你的控制器中：

$scope.source.url = $scope.source.element === 0 ? '' :  '#/resource/' + $scope.source.a + '/' + $,scope.source.b + '/val';

并在您的标记中

<a "ng-Href={{source.url}}>{{source.element}}</a>

Answer 5

创建一个带有两个属性的指令，如 condition 和 url:

app.directive('anchor', function() {
    return {
        scope: {
            condition: '=expr',
            url: '@',
            prompt: '@'
        },
        restrict: 'AE',
        replace: 'true',
        template: '<div>' +
                      '<div ng-if="condition">' + 
                          '<a ng-href="{{url}}">{{prompt}}</a>' + 
                      '</div>' +
                      '<div ng-if="!condition">{{prompt}}</div>' +
                  '</div>'
    };
});

<anchor expr="1 === 1" url="#/test" prompt="test" />

jsfiddle link.

根据条件显示 href 的优雅方式

Elegant way to show href based on condition

html

anchor

href

angularjs