使Bootstrap導航欄搜索框工作

我想做一個搜索功能，如果我直接將查詢參數放入我的網址，但我不知道如何使其工作，以便它從搜索中撿起它框並執行它。我已經使用ng-model將文本本身映射到工作正常的控制器，但執行不起作用。使Bootstrap導航欄搜索框工作

導航欄形式：當我手動運行它，所以是搜索本身

<form ng-submit="doSearch()" class="navbar-form"> 
    <div class="form-group" style="display:inline;"> 
     <div class="col-md-offset-4 input-group" style="display:table;"> 
      <input ng-model="search.text" class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text"> 
       <span class="input-group-addon" style="width:1%;"> 
        <span class="glyphicon glyphicon-search"></span> 
       </span> 
     </div> 
    </div>

順便說一句，我的doSearch（）函數工作得很好。我也驗證了search.text是通過了。我想我在問什麼是當用戶點擊它或按下回車鍵時，如何讓圖標（glyphicon-search）執行ng-submit =「doSearch（）」。

對不起，如果這是非常明顯的。我總是更喜歡事物的後端，所以對於HTML和Angular來說，這是一種新鮮的東西。

感謝

來源

2016-11-28 Shayan Khan

你可以將我們的'doSearch（）'函數的代碼賦予給我們嗎？ – Mistalis

所以這工作到最後。首先，正確的HTML工作：

<form ng-submit="doSearch()" class="navbar-form"> 
<div class="form-group" style="display:inline;"> 
    <div class="col-md-offset-4 input-group" style="display:table;"> 
     <input ng-model="search.text" class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text"> 
      <span ng-click="doSearch()" class="input-group-addon" style="width:1%;"> 
       <span class="glyphicon glyphicon-search"></span> 
      </span> 
    </div> 
</div> 
</form>

此外，有一個問題，視圖不連接到控制器。其實，讓我重申一下 - 它連接到控制器，但只有當整個頁面加載和我的測試時，我有一個console.log（'我已經加載'）放在那裏。所以當我看到「我已經加載」時，我認爲我的控制器被正確調用。

但是，doSearch（）在通過角度路由連接的控制器中，所以ng-View沒有連接到正確的控制器。

我不確定這是否意味着任何人，但我寫這個，以防別人遇到像我這樣的問題。

所以，只是爲了總結這個問題不是我最初的想法。 ng-submit（用於按下回車時的表單提交）和ng-click（用於點擊圖表）就可以實現。

來源

2016-12-06 06:40:48

你可以放置圖標<button>元素而不是<span>內，調整了CSS的將它集成到表單字段。

在問候觸發輸入，使用jQuery像這樣的搜索可以用於：

$('input').keypress(function (e) { 
var key = e.which; 
if(key == 13) // the enter key code 
    { 
    doSearch(); 
    } 
});

來源

2016-11-28 15:12:52 Syden

感謝您的回答。但在Angular中，你可以在本地執行此操作。我的回答將解釋我的整個思維過程如何解決這個問題是有缺陷的。不過，我會注意到這一點，因爲我確信它會爲我的項目派上用場。乾杯 –

你嘗試搜索圖標之前使用<button type="submit"> <span class="glyphicon glyphicon-search"></span> 指定點擊該按鈕相當於該表單的提交事件。

來源

2016-11-28 15:18:01 orangepj

使Bootstrap導航欄搜索框工作

回答

相關問題