Angular ng-click 用于 dropdown 选项标签

Question

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

我这里有一个下拉列表 selection，用于 2. 姓名和号码。

Select 姓名，然后是 select 号码。一旦为数字设置了 select 下拉列表，就会执行执行函数，并在控制台上显示输出。

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

如何确保仅当用户单击其中一个选项标签时才执行执行函数？

标记：

<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

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

只要您单击对象（在本例中为下拉菜单），就会执行 ng-click。 ng-change 在表单元素更改时执行，即用户更改下拉项时执行。

Answer 2

您需要使用angular ng-change (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，点击事件会在您点击 select 框时触发。但是，如果您使用 ng-change，当 select 框的值根据选项 selection 发生变化时，将触发 change 事件，因此 execute() 将触发。

Answer 3

ng-click 将在您单击带有该装饰器的任何元素时触发，而不是该选项。我认为 ng-change 在您的情况下可能是一个更好的指令。

Angular ng-click 用于 dropdown 选项标签

Angular ng-click for drodpdown option tag

javascript

html

angularjs

angularjs-ng-click