使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导航栏搜索框工作

回答

相关问题