【发布时间】:2018-05-15 10:03:40
【问题描述】:
我正在尝试自动搜索并选择产品。我需要重定向到与所选下拉列表关联的产品 URL。我能够得到所有的搜索结果。
我已经为所有搜索列表创建了数据列表,并在数据列表上创建了ng-click 事件以将选定的详细信息发送到控制器。但是ng-click 不在数据列表中工作。你能帮帮我吗
例如。在(key,data) 中,我需要在前端搜索框中显示data,但是在从datalist 中选择该数据时,我需要将其各自的key 发送到控制器
有问题的部分供您参考(plunker 中的完整代码):
<h2>Custom search field</h2>
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" list="suggestions" placeholder="search" ng-model="obj.searchText" ng-focus="searchSuggest()" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button" ng-click="showProduct(obj)">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<div>
<datalist id="suggestions">
<p ng-repeat="values in suggestionResults track by $index"><option ng-repeat="(key,data) in values" value="{{data}}" ng-model="selectedProduct" ng-click="showProduct({key: key, data: data})"></p>
</datalist>
</div>
在上面的代码中,你可以看到key和data。我只需要显示数据值,但在选择一个选项时,我需要将相应的 URL 链接发送到控制器。在 ng-repeat 中创建 datalist
请从下面的 plunker 链接的文本框中的下拉列表中选择一个值
*
我已更新 plunker,以便在搜索中也可以看到 URL 下拉列表,我需要将该 URL 简单地传递给控制器。请帮忙 我如何实现它
*
【问题讨论】:
-
你能把有问题的代码sn-p复制到这里吗?
-
添加了问题部分的代码。您可以查看 json 结构以了解详细信息。请从文本框中的下拉列表中选择一个值
-
在您的 html 文件中检查您传递给“showProduct()”的参数是否有效。应该是“obj”还是“obj.searchText”?
-
因为它是单个值,将其作为 obj 或单个参数传递。它采用预期值。所选文本正在传递给控制器。现在我必须搜索与该关键字匹配的 json 并迭代在同一 json 中定义的相应 URL
标签: javascript angularjs json html html-datalist