如何将angularjs ng-click与html5 datalist一起使用答案

【问题标题】：How to use angularjs ng-click with html5 datalist如何将angularjs ng-click与html5 datalist一起使用
【发布时间】：2024-01-21 09:42:01
【问题描述】：

我正在使用 AngularJS，我想在选择数据列表 (html5) 的元素时使用指令 ng-click。

这是我的实际代码示例：

<label>Search</label>
<input type="text" class="input-search" list="datalistcit" ng-change="changeQuery(queryCity)" ng-model="queryCity" />
<datalist id="datalistcit">
   <option ng-repeat="city in cities" ng-click="goCity(city)" value="{{city.name}}">
   </option>
</datalist>

它不起作用，永远不要执行js方法goCity..有什么想法吗？

【问题讨论】：

您的数据列表中可能需要一个 ng-model。我知道如果它是一个没有 ng-model 的选择标签，它将无法工作。
不工作.. 这是示例jsfiddle.net/lukers/MCnL2
在这里试试我的答案。 *.com/questions/23112662/…

标签： javascript html angularjs angularjs-ng-click html-datalist

【解决方案1】：

ng-click 不适用于 datalist 选项，因为在使用 datalist 时似乎不会触发 click 事件（也不是任何按键事件）。

您必须在函数 input 上使用您的 ng-change 并扩展它以检查当前值是否也存在于数据列表中。

【讨论】：

【解决方案2】：

datalist 和 select 一样，你不要把事件处理器放在 option 里，你把事件处理器放在 select 或 input 里。此外，您不使用 ng-click，而是为此使用 ng-change。

【讨论】：

我将事件放在数据列表中但不起作用..这是示例jsfiddle.net/lukers/MCnL2
我说 ng-change 和 ng-model 都需要放在 input 或 select 中，不要放在 datalist 或 option 中。

【解决方案3】：

<input list="stateList"  name="state" ng-model = "payCntrl.billingAddressService.billingAddress.state">
    <datalist id="stateList">
        <select>
            <option ng-repeat="state in payCntrl.billingAddressService.states | filter : {country : payCntrl.billingAddressService.billingAddress.country}" 
                                    value="{{state.name}}"></option>
       </select>    
   </datalist>

名称和 ng-model 在输入中。

数据：

states : [{name : "NJ" , country: "USA"} ,  {name : "NY" , country: "USA"} , 
         {name : "GA" , country: "USA"} ,   {name : "TX" , country: "USA"} , 
         {name : "CA" , country: "USA"} , 
         {name : "Delhi" , country: "India"} ,  {name : "Karnataka" , country: "India"} , 
         {name : "Hyderabad" , country: "India"} ,  {name : "West Bengal" , country: "India"} , 
         {name : "Zhejiang" , country : "China"} , {name : "Hubei" , country : "China"},
         {name : "LONDON" , country : "United Kingdom"} , {name : "MANCHESTER" , country : "United Kingdom"}]

【讨论】：