【问题标题】:ng-click event on datalist not working数据列表上的 ng-click 事件不起作用
【发布时间】:2018-05-15 10:03:40
【问题描述】:

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

我已经为所有搜索列表创建了数据列表,并在数据列表上创建了ng-click 事件以将选定的详细信息发送到控制器。但是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 中创建 datalist

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

*

我已更新 plunker,以便在搜索中也可以看到 URL 下拉列表,我需要将该 URL 简单地传递给控制器​​。请帮忙 我如何实现它

*

code here

【问题讨论】:

  • 你能把有问题的代码sn-p复制到这里吗?
  • 添加了问题部分的代码。您可以查看 json 结构以了解详细信息。请从文本框中的下拉列表中选择一个值
  • 在您的 html 文件中检查您传递给“showProduct()”的参数是否有效。应该是“obj”还是“obj.searchText”?
  • 因为它是单个值,将其作为 obj 或单个参数传递。它采用预期值。所选文本正在传递给控制器​​。现在我必须搜索与该关键字匹配的 json 并迭代在同一 json 中定义的相应 URL

标签: javascript angularjs json html html-datalist


【解决方案1】:

如果您在对象数组中搜索,则使用 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'});

【讨论】:

    【解决方案2】:

    删除您的 ng-click="showProduct(obj)" 并将其添加到

    <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>
    

    在节目中

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

    data.key 是您的重定向网址

    【讨论】:

    • ng-click 没有从 选项触发
    • 用于测试删除数据列表并使用
        列表
    • 它正在与 ul li 合作。但要求是让它在点击“搜索图标”时工作。至少在数据列表上单击。因为它需要自动搜索过滤器。
    • 好的,那么您可以尝试将模型添加到 并在搜索按钮上将 userSelection 传递给 showProduct 方法
    • 没关系。但是我如何在 ng-model="userSelection".. 中传递 URL。因为 ng-model 采用 value=""'attribute'. 中存储的内容,因为我们只存储 'text' 而不是 URL。,它再次通过相同的文字。如果我错了,请告诉我。我会再试一次
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多