Question

我正在使用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 ..任何想法？

Answer 1

ng-click无法处理数据列表选项，因为点击事件（也没有任何按键事件）在使用数据列表时似乎没有被触发。

您必须在函数ng-change上使用input并对其进行扩展，以检查当前值是否也出现在数据列表中。

Answer 2

datalist与select相同，你不要把事件处理程序放在选项中，你把事件处理程序放在select或input中。你也没有使用ng-click，你可以使用ng-change。

Answer 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"}]

如何使用angularjs ng-click与html5 datalist

3 个答案: