Angular ng-click 用于下拉选项标签

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 在表单元素更改时执行，即用户更改下拉项时。

Answer 3

您需要使用角度 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，所以 click 事件会在您单击选择框时触发。但是如果你使用 ng-change，change 事件会在选择框的值根据选项选择发生变化时触发，因此 execute() 会触发。