javascript - angularjs 条件 href

Question

谁能告诉我如何执行条件 href 而不是复制 a 标签来执行隐藏/显示。

这就是我在这里尝试做的事情，如果 DisplayLocation 为空，则使用字符串“未知”，否则使用位置。我试过 x 之类的东西？ y :“未知”，但我认为这在 href 中不起作用。

<a class="btn-main orange" href="#!/movie-details/
   {{movie.Item.DisplayLocation | prettify}}/
   {{movie.Item.Title | prettify}}/{{movie.Item.Id}}" 
   id="view--{{$index}}"> View
</a>

修复:

<a class="btn-main orange" data-ng-href="#!/movie-details/
   {{movie.Item.DisplayLocation ? 
       movie.Item.DisplayLocation : 'unknown' | prettify}}/
   {{movie.Item.JobTitle | prettify}}/
   {{movie.Item.Id}}" 
   id="view--{{$index}}">View
</a>

Answer 1

您可以改为在您的 Controller 中创建一个函数，然后在您的绑定(bind)中使用该函数。

Controller :

$scope.returnConditionalDisplayLocation = function returnConditionalDisplayLocationFn() {
    return $scope.movie.Item.DisplayLocation ? 
           $scope.movie.Item.DisplayLocation : "unknown";
}

HTML:

<a class="btn-main orange" 
   href="#!/movie-details/{{returnConditionalDisplayLocation() | prettify}}/
   {{movie.Item.Title | prettify}}/{{movie.Item.Id}}" id="view--{{$index}}"> View
</a>

这样您就可以将逻辑分离到它所属的 Controller 中，同时清理您的 HTML!

编辑:

使用 href 是可以的，但是如果用户在 Angular 有时间呈现 href 的绑定(bind)值之前点击链接，那么他们将到达一个错误的 url .

因此你想根据 Angulars Documentation 使用 ng-href

和上面一样，你会这样写:

<a class="btn-main orange" ng-href="#!/movie-details/
   {{returnConditionalDisplayLocation() | prettify}}/
   {{movie.Item.Title | prettify}}/{{movie.Item.Id}}" 
   id="view--{{$index}}"> View
</a>