使用可選查詢參數格式化外部鏈接

我正在研究一個Angular應用程序，它需要鏈接到固定（外部）路徑以及在Angular頁面上設置的一些查詢參數。我想提供某種不錯的數據綁定在我的角度HTML，如：使用可選查詢參數格式化外部鏈接

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

然而，我所有的查詢參數都是可選的。這是很容易的角度應用程序本身內部處理，使用類似

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

有什麼辦法，我可以得到這個聲明風格帶來的好處時，我只是想格式化文本鏈接？

來源

2014-01-12 Daniel Buckmaster

我意識到這種情況的理想機制可能是一個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。

來源

2014-01-13 00:24:16

你可以檢查：'if（opts [opt]）{...}' –

@PavelNikolov如果opts [opt] === false'會怎麼樣？ –

對不起，沒有想到這個 - 你是對的 –

使用ngHref屬性是這樣的：

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

下面是對文件的鏈接：http://docs.angularjs.org/api/ng.directive:ngHref

來源

2014-01-12 23:25:52

哦！這是個好主意，謝謝。但是從文檔中我看不到如果'value'或'check'（或兩者）未定義會發生什麼情況。在'$ location'代碼中，它們不會包含在URL中。 –

如果你不希望它們被包含在URL中，那麼有一個'queryString'變量並將其填充到控制器中。然後，將這個變量包含在URL http://example.com/query? {{queryString}}中' –

順便說一句，如果你使用了一個未定義的變量，那麼你的url看起來就像這個'「http：///www.api.com/query?param=&flag=「'這可能是開箱即用的 - 另一端的參數將是空字符串。 –

您可以在雙curlys包圍的表達式中使用三元運算符。例如：如果參數存在，{{value ? 'param='+value : ''}}將導致「param = {{value}}」，否則將導致「」。

所以，你可以做到以下幾點：

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

demo fiddle

來源

2014-01-12 23:37:14 KayakDave

這就是我害怕的！我猜這不是很糟糕，即使沒有參數，在URL的末尾加上'？'也不會造成任何破壞。 –

是的，或者你可以編寫一個測試，檢查是否有任何參數用於「？」。權衡是你的html開始變得複雜的邏輯 – KayakDave

@DanielBuckmaster我仍然會在控制器中填充整個查詢字符串，然後有一個這樣的網址'example.com/query？{{query_string}} - 避免任何計算數據綁定表達式。如果表達式在控制器中，它將只執行一次！ –

使用可選查詢參數格式化外部鏈接

回答

相關問題