[英]ng-click event on html5 datalist not working angularjs
我尝试自动搜索并选择产品。我需要重定向到与所选下拉列表相关的产品URL。 我可以获取所有搜索结果。
我已经为所有搜索列表创建了数据列表,并在数据列表上创建了ng-click
事件,以将选定的详细信息发送到控制器。 但是ng-click
在数据列表中不起作用。 你能帮我吗
例如 在(key,data)
,我需要在前端搜索框中显示data
。但是从数据列表中选择该数据时,我需要将其各自的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>
在上面的代码中,您可以看到密钥和数据 。 我只需要显示数据值,但是在选择一个选项时,我需要将相应的URL链接发送给控制器。 在ng-repeat中创建数据列表
请从下面的“ punker”链接的文本框中的下拉列表中选择一个值
*
我已经更新了插件,以便在搜索下拉列表中也可以看到URL。我需要将该URL简短地传递给控制器。 请帮助我如何实现它
*
您的ng-click在chrome中触发正常,我可以看到您的console.logs数据。
我检查您的代码,原因是您的搜索逻辑不起作用并且您在控制台中不断出现“不匹配”的原因是您使用了错误的条件,您没有在检查值,而是使用搜索字符串,而是在检查了“关键字” / Value对象”和搜索字符串。
将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";
}
我写了另一种方法
$scope.inputChanged = function(data){
var obj = _.find($scope.suggestionResults,function(o){
var keyArr = Object.keys(o);
return o[keyArr[0]] === data
})
$scope.showProduct(obj)
}
它将作为一种变通方法来实现您想要的。 从这里可以调用$scope.showProduct(obj)
并实现ng-click
事件行为
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.