Question

我正在开发一个Angular应用程序，需要链接到固定（外部）路由，并在Angular页面本身设置一些查询参数。我想在我的Angular HTML中提供一些不错的数据绑定，例如：

<a href="http://www.api.com/query?param={{value}}&flag={{check}}">Link</a>

但是，我的所有查询参数都是可选的。这可以在Angular应用程序本身中轻松处理，使用类似

的内容

$location.path('/query').search({param: value, flag: check});

当我只想格式化文本链接时，有什么办法可以获得这种声明风格的好处吗？

Answer 1

我意识到理想的机制可能是filter。它利用自动数据绑定，使用起来非常简单。 HTML变为：

<a ng-href="http://www.api.com/endpoint{{params | query}}">Link</a>

过滤器代码：

myApp.filter('query', function() {
  return function(opts) {
    var params = [];

    for(var opt in opts) {
      if(opts.hasOwnProperty(opt)) {
        if(opts[opt] !== "" && opts[opt] !== undefined) {
          params.push(opt + "=" + opts[opt]);
        }
      }
    }

    return params.length
      ? "?" + params.join("&")
      : "";
  };
});

here's a fiddle。这个过滤器处理undefined属性和空字符串...非常适合我自己的用例，但我意识到它可能不适合所有人。无论如何，过滤器代码本身很容易修改（如果适合你，你可以用$.param轻松替换它。）

编辑：我已经意识到AngularJS将模型绑定到null的空输入，所以在我的实际代码中，我正在检查过滤器中的null。

Answer 2

使用ngHref属性，如下所示：

<a ng-href="http://www.api.com/query?param={{value}}&flag={{check}}"></a>

以下是文档的链接：http://docs.angularjs.org/api/ng.directive:ngHref

Answer 3

您可以在双卷曲所包含的表达式中使用三元运算符。例如：如果param存在，{{value ? 'param='+value : ''}}将导致“param = {{value}}”，否则将导致“”。

所以你可以做到以下几点：

<a href="http://www.api.com/query?{{value ? 'param='+value : ''}}{{check ? '&flag='+check+'' : ''}}"></a>

demo fiddle

使用可选查询参数格式化外部链接

3 个答案: