javascript - html5数据列表上的ng-click事件不起作用
问题描述
我正在尝试自动搜索并选择产品。我需要重定向到与所选下拉列表关联的产品 URL。我能够获得所有搜索结果。
我已经为所有搜索列表创建了 datalist 并ng-click
在 datalist 上创建了事件以将选定的详细信息发送到控制器。但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 中创建数据列表
请从下面的 plunker 链接的文本框中的下拉列表中选择一个值
*
我已经更新了 plunker,以便在搜索下拉列表中也可以看到 URL。我需要将该 URL 简单地传递给控制器。请帮助我如何实现它
*
解决方案
您的 ng-click 在 chrome 中触发良好,我可以看到您的 console.logs 数据。
我检查了您的代码,您的搜索逻辑不起作用并且您在控制台中不断收到“不匹配”的原因是您使用了错误的条件,您没有检查值,使用搜索字符串,您正在检查“键/值对象”与搜索字符串。
将 showProduct 方法中的 if 条件更改为:
if ($scope.suggestionResults[i][Object.keys($scope.suggestionResults[i])[0]] == searchText) {
console.log(Object.keys(response.data[i])[0]);
$scope.redirectLink = Object.keys(response.data[i])[0];
}else{
$scope.redirectLink = "not matching";
}
推荐阅读
- python - 一个上下文管理器而不是两个用于打开文件?
- python - 如何在 selenium Python 中进行分页?
- c# - 从随机列表中推断网格中每个点的高度
- ios - 我可以在 IOS 中获取下载的 M4A、MP3 文件吗?
- asp.net - ASP.NET MVC5 路由/渲染缓慢
- facebook - facebook登录没有对话框提示
- sms - 我可以绕过短信提供商和移动运营商,直接向电话号码发送短信吗?
- c++ - 从多个头文件中的接口声明重写函数时如何避免重复代码?
- wordpress - WordPress Gutenberg - 在模板中使用自定义块类别的页面编辑屏幕上的白屏
- flutter - 使用 Navigator 将屏幕从堆栈中弹出