Question

我正在尝试创建一个搜索功能，如果我直接将查询参数放入我的网址，但我不知道如何使其工作，以便从搜索框中选择并执行它。我已经使用ng-model将文本本身映射到可以正常工作的控制器，但执行不起作用。

导航栏形式：

<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来说是一个新手。

由于

Answer 1

您可以将图标放在<button>元素而不是<span>中，调整一点css以将其集成到表单字段中。

关于在enter上触发搜索，使用jQuery可以使用类似的东西：

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

Answer 2

您是否尝试在搜索图标前使用<button type="submit"> <span class="glyphicon glyphicon-search"></span> 指定单击该按钮等同于该表单的提交事件。

Answer 3

所以这最终奏效了。首先，正确的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未连接到正确的控制器。

我不确定这对任何人是否意味着什么，但我写这篇文章以防其他人遇到像我这样的问题。

所以只是总结一下这个问题并不是我原先想到的HTML。 ng-submit（按下输入时表单提交）和ng-click（单击glyphicon）就可以了。

使Bootstrap导航栏搜索框工作

3 个答案: