7

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

这是我的实际代码的示例：

<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.. 任何想法？

4

3 回答 3

5

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

您将不得不使用您的ng-changeon 函数input并扩展它以检查当前值是否也存在于数据列表中。

于 2015-04-23T09:33:47.467 回答
2

datalist 与 select 相同，您不要将事件处理程序放在选项中，而是将事件处理程序放在 select 或 input 中。此外，您不使用 ng-click，而是为此使用 ng-change。

于 2014-03-12T03:01:19.717 回答
1 
<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 在 input 上。

    数据 ：

    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"}]
于 2015-01-28T20:14:49.163 回答