html5 数据列表上的 ng-click 事件不工作 angularjs

Question

我正在尝试自动搜索并选择产品。我需要重定向到与所选下拉列表关联的产品 URL。我能够得到所有的搜索结果。

我已经为所有搜索列表创建了数据列表，并在数据列表上创建了 ng-click 事件以将选定的详细信息发送到控制器。但是 ng-click 在数据列表中不起作用。你能帮帮我吗

for.eg。在 (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>

Here in above code., u can see key and data. I need to just show Data value but on selecting one option., i need to send the respective URL link to conroller. Created datalist in ng-repeat

Please select a value from dropdown in textbox from plunker link below

*

I have updated plunker so that URL also can be seen in search dropdown., I need to pass that URL to conroller in short. please help me how to achieve it

*

plnker code here

Answer 1

您的 ng-click 在 chrome 中触发正常，我可以看到您的 console.logs 数据。

我检查了你的代码，你的搜索逻辑不起作用并且你在控制台中不断得到 "not matching" 的原因是你使用了错误的条件，你没有检查值，搜索字符串，您正在使用搜索字符串检查 "Key/Value object"。

将 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";
}

Answer 2

Check this plunkr

我写了另一个方法

$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 事件行为

html5 数据列表上的 ng-click 事件不工作 angularjs

ng-click event on html5 datalist not working angularjs

javascript

json

angularjs

html-datalist