Событие ng-click на html5 datalist не работает angularjs

Question

Я пытаюсь выполнить автоматический поиск и при выборе продукта. Мне нужно перенаправить на URL продукта, связанный с выбранным раскрывающимся списком.Я могу получить все результаты поиска.

Я создал список данных для всего списка поиска и создал событие ng-click в списке данных, чтобы отправить выбранные данные контроллеру.Но ng-click не работает в datalist.Можете ли вы помочь мне

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>

Здесь, в приведенном выше коде., вы можете увидеть ключ и данные .Мне нужно просто показать значение данных, но при выборе одного варианта. Мне нужно отправить соответствующую ссылку URL на контроллер.Создан список данных в ng-repeat

Пожалуйста, выберите значение из выпадающего списка в текстовом поле из ссылки на плункер ниже

*

Я обновил plunker, чтобы URL также можно было видеть в выпадающем списке поиска. Мне нужно коротко передать этот URL контроллеру.Пожалуйста, помогите мне, как этого добиться

*

код plnker здесь

Answer 1

Проверьте этот план

Я написал другой метод

$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 поведения события

Answer 2

Ваш ng-click срабатывает нормально в chrome, я вижу ваши данные console.logs.

Я проверяю ваш код, причина в том, что ваша логика поиска не работает, и вы продолжаете получать "не соответствующие" вваша консоль, это то, что вы используете неправильное условие, вы не проверяете значение, с помощью строки поиска, вы проверяете «объект ключа / значения» с помощью строки поиска.

измените условие if в методе showProduct следующим образом:

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