Question

这是一个jsfiddle。 http://jsfiddle.net/cuycbxxp/

我在这里有2个名字和数字的下拉选择。

选择名称，然后选择数字。一旦为数字选择了下拉列表，执行函数执行并在控制台上显示输出。

这可能看起来工作正常。但打开控制台并单击下拉列表。在我们选择下拉选项之前执行execute函数。

如何确保只有当用户点击其中一个选项标签时才能执行执行功能？

标记：

<div ng-controller="MyCtrl">
    <div>
        <label>Names:</label>
        <select ng-model="params.name">
            <option value="pa">Taeo</option>
            <option value="ws">Wers</option>
            <option value="pn">Petin</option>
        </select>
        <br>
        <label>Numbers:</label>
        <select ng-click="execute()">
            <option value="22">22</option>
            <option value="33">33</option>
        </select>
    </div>
</div>

Answer 1

单击具有该装饰器的任何元素时，将触发

ng-click，而不是选项。我认为ng-change可能是一个更好的指令。

Answer 2

将<select ng-click="execute()">更改为<select ng-change="execute()">

每当您单击对象（在本例中为下拉列表）时，ng-click都会执行。更改表单元素时会执行ng-change，即每当用户更改下拉项时。{/ p>

Answer 3

您需要使用角度ng变化（ngChange）。

使用

ng-change="execute()"

而不是

ng-click="execute()"

文档参考ng-change： https://docs.angularjs.org/api/ng/directive/ngChange

文档参考ng-click： https://docs.angularjs.org/api/ngTouch/directive/ngClick

由于您使用ng-click，因此单击选择框时会触发click事件。但是，如果使用ng-change，当选择框的值根据选项选择而改变时，将触发change事件，因此execute（）将触发。

Angular ng-click for drodpdown选项标签

3 个答案: