範例控制

此資訊的版本可以在 advancedSearch.tmpl.html 的註解中找到。由於範本檔案是純 html，因此可以使用任何 html 或 angularjs 控制項。有關 angularjs 控制項的資訊可在 https://docs.angularjs.org/api 中找到。但是為了讓控制項與控制器正確進行資料繫結，必須遵循某些規則。

進階搜尋與搜尋頁會使用 url 參數 customCriteria 以保留自訂輸入資料。因此，所有資料繫結控制項必須將其參數資料儲存為 customCriteria 的屬性，例如透過使用 data-ng-model=”customCriteria.exampleKey” 的方式。

進階搜尋控制器會從 facets.xml 匯入所有資料。現成控制項沒有使用的任何多面會儲存在名為 customfacets 的物件中。欲存取 customFacets 中的多面，請將它作為 customFacets.key 參照，其中 key 是 facets.xml 中所需頂層多面的 facetKey。

此處以及 advancedSearchCustomControls.tmpl.html 中提供了一些帶註釋的範例。

欲新增與現有列類似的新列，請複製此 fieldRow div，然後將 inputSpan div 中的輸入取代為您自己的 control.data-ng-model，這對於將控制項與控制器相繫結非常重要，如此才能儲存輸入的資料。它的格式必須設定為 'customCriteria' 後面接著所需的參數鍵。此鍵與在搜尋請求的 $filters 部分中傳送至伺服器的鍵相同。

<div class="fieldRow">
<label class="searchLabel">Test Label</label>
<div class="inputSpan">
<input type="text" class="testInput"
data-ng-model="customCriteria.testValue"
data-ng-trim="false"/>
</div>
</div>

在選取元素中填入選項的方式有 2 種。第一種方式 (如此處所見) 是針對選取中的一系列選項元素進行硬式編碼

<div class="fieldRow">
<label class="searchLabel">Test Dropdown</label>
<div class="inputSpan">
<select data-ng-model="customCriteria.dropdown">
<option value=""></option>
<option value="option1">Option 1</option>
<option value="2">Option 2</option>
<option value="c">Option 3</option>
</select>
</div>
</div>

第二種方式是指定選項清單，以便從 facets.xml 逐一版序化。在下面的範例中，facetKey 和 key 應該取代為 facets.xml 中自訂多面的 facetKey (在 data-ng-options 字串中前面必須為 'customOptions.')，'option' 為預留位置迭代器變數，label 是在控制項中顯示的 facets.xml 當中的屬性，而 key 是 facets.xml 中的 facetKey 屬性 (同樣會用作在搜尋請求中將篩選資料傳送至伺服器的鍵)。欲插入空白/未選擇的選項，可以建立單一空白選項元素，如下所示。

<div class="fieldRow">
<label class="searchLabel">Second Test Dropdown</label>
<div class="inputSpan">
<select data-ng-model="customCriteria.key"
data-ng-options="option.key as option.label
for option in customFacets.facetKey">
<option value=""></option>
</select>
</div>
</div>

多重選取是專為 Servigistics InService 所設計的控制項。欲使用它，請複製此控制項並視需要修改。

多重選取控制項必須由來自 facets.xml.Multiselect 的資料填入。控制項會佔用整列，並且可以在產生新欄之前，透過指定 title-text.Column-size 告知多重選取欄中應該有多少選項，選擇性地建立它們的左側標籤。如果任何一個選項有子選項，運作方式會有一點不同。如果是該情況，該欄的大小維持不變，除非欄中的最後一個選項擁有的子選項超出通常欄中可容納的數量。在此情況下，所有子選項都將保留在開始欄中，而下一欄將會從下一個頂層選項開始。元素 selected-param-amount、url-param 與 value-set 必須包含與所指示完全相符的值。在所有情況下，必須將 FacetKey 以您想要連接至控制項的多面的實際 facetKey 取代；.url-Param 用來取代 data-ng-model，以便將用來傳遞所選值的鍵儲存在搜尋請求 $filters 參數中。