datalist上的ng-click事件不起作用

时间:2018-05-15 10:03:41

标签: javascript angularjs json html5 html-datalist

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

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

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

在上面的代码中,您可以看到键和数据。我只需显示数据值,但选择一个选项。我需要将相应的URL链接发送到conroller。在ng-repeat

中创建了 datalist      

请从下面的plunker链接中的文本框中的下拉列表中选择一个值

*

  

我更新了plunker,以便在搜索中也可以看到URL   下拉列表。我需要将该URL传递给conroller。请帮忙   我如何实现它

*

code here

2 个答案:

答案 0 :(得分:0)

如果您要搜索对象数组,请使用 findIndex 方法。

   let json_array = [{a:'apple',b:'orange'},{a:'banana',b:'carot'}];
   let position  = json_array.findIndex(key=>key.a == 'banana');
   let its_value = json_array[position].a;

否则你需要进行对象值搜索,下面就是一个例子。

 function find_by_key(obj,target) {

        let c = -1;
        let find_pos = c;
        loop1:
        for(let i in obj){
            c++;
            loop2:
            for(let g in target){
                if(g == i && target[g] == obj[i]){
                    find_pos = c;
                    break loop1;
                }
            }
        }
        return find_pos;
    }
    let obj = {a:'Apple',b:'Orange'};

    let find = find_by_key(obj,{a:'Apple'});

答案 1 :(得分:0)

删除你的ng-click =&#34; showProduct(obj)&#34;并将其添加到

<p ng-repeat="values in suggestionResults track by $index">
    <option ng-repeat="(key,data) in values" value="{{data}}" ng-click="showProduct({key: key, data: data})">
    {{key}}
</p>
showProduct中的

$scope.showProduct = function(data){
    console.log(data.key, data.data);
}

data.key是您的重定向网址