根據搜索字符串結果切換模型

我想要做的是找到一種基於搜索字符串結果切換模型的簡單方法，我做了一個快速概念示例以幫助可視化;根據搜索字符串結果切換模型

JSFiddle

我有一個具有它的模型blah在提供的示例中的每個項目中的切換按鈕。

我一直在失敗的是找出一種方式來說，例如如果search = name.phone然後blah = false或基本上使用搜索字符串切換方塊紅色，如果用於搜索的字符串是name.phone而且它在搜索結果中，至少希望傳達這個概念。

實際情況是，我在項目模板中有部分內容可能首先隱藏，但它們仍然會生成搜索結果，但結果中不可見。所以我希望它們對用戶可見，如果它們是被搜索到的。有意義嗎？

我曾希望它可能像一樣簡單;

<div ng-class="{'style-it red':blah, 
       'style-it green':!blah, 
       'style-it red':search=name.phone}"></div>

..或類似的東西。或者，也許是來自搜索輸入的內聯三元組？我可以顯示更多失敗的嘗試，但無論如何，他們顯然是錯誤的方式，因爲我問，所以我會節省空間。哦，甚至在你考慮下調投票之前，或者給我一個解釋，爲什麼至少要去看看我的Q/A比率，以瞭解你會幫助經常幫助別人的人。我以學習的名義歡迎一塊不起眼的餡餅。

來源

2015-04-22 Chris W.

你在追求什麼確切的邏輯場景？ 'search == name.phone'將起作用（只要你記得第二個'='）。如果這是在中繼器中，使用'ng-init'來檢查'search'值並設置'blah' - 'ng-init =「blah = search == name.phone」' – tymeJV

而不是使用ng-class我會有一個綠色框和一個紅色框，並使用ng-show來切換正確的框。 ng顯示標準可以基於模型值和搜索值。 – Eterm

確切的情況是說，我有一個div內的項目，默認情況下不顯示。它有一個模型來切換其可見性。比如說它擁有一個電話號碼。如果您進行搜索，它仍會提取該項目，但該用戶可能無法立即看到該電話號碼。所以我希望它將該模型切換爲真或假，如果該部分是用作搜索的，那麼合理？看起來我可能需要更明顯地修飾一些，並且在我轉換到新的語法時，反對選票不會打擾我。 –

你的問題有點不清楚，但如果你想根據你是否有完全匹配來切換某些東西，你可能想用ng-show來控制可見性。

作爲證明：https://jsfiddle.net/7by52qhh/1/

<span ng-show="name.name === search">Exact Match!</span>

這將出現在名稱中繼器時，有一個精確匹配。

這當然可以顯示其他模型數據，爲了清楚起見，我將其留作靜態文本。

來源

2015-04-22 20:41:50 Eterm

+1只是因爲它非常接近，實際上是我可以在別處使用的東西。除了我試圖找出一種方法，如果說name.phone = 555-1234，他們搜索1234仍然給他們的項目，那麼它也會將模型翻轉爲true以與包含電話號碼，並使其ng-show = true，問題是div已經有一個ng顯示處理切換其項目中的按鈕的可見性......大聲笑，如果這是c＃/ xaml我會從來沒有問過，所以我欣賞這種幫助！ –

不要過度複雜化，不要試圖用模型切換可視性，只需使用具有多個條件的ng顯示來切換它。或者使用modelValue &&（表達式） – Eterm

那麼拍攝，我認爲我並不複雜。我創建了一些選項卡，單擊一個顯示/隱藏一個div，同時將其他模型設置爲false，以便每次只顯示一個。我嘗試了一些隱藏/顯示的div，例如'ng-show =「ToggleButtonModel || search == name.phone」'但沒有喜悅。我可能不得不再想一想，因爲你的方式需要一個完全匹配的字符串和類型，我的目標是如果說只使用手機的最後4位數字或第一個名字找到搜索結果，仍然拋出一個布爾我可以用ng顯示這些面板的信息坐 –

根據搜索字符串結果切換模型

回答

相關問題