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

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

我意识到理想的机制可能就是过滤器.它利用自动数据绑定,使用起来非常简单.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("&")
      : "";
  };
});

而且这里有一个小提琴.这个过滤器处理undefined属性和空字符串...非常适合我自己的用例,但我意识到它可能并不适合所有人.无论如何,过滤器代码本身很容易修改($.param如果适合你,你可以很容易地替换它).

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