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>

对于角度标记，最好使用 ngHref 。

如果用户在角度加载之前单击href，它将会输入错误的地址。

Answer 2

您可以使用ng-if

http.Handler

ngif Documentation

Answer 3

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

<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的优雅方式

5 个答案: