Question

我在这里有一个奇怪的问题。请参考这个jsfiddle

<select ng-model="bob" ng-click="test()">
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="15">15</option>
</select>

正如你在这个小提琴中看到的那样，我有5,10和15选项。如果用户选择10或15，则会触发ng-change事件并弹出警告消息。正如您所注意到的那样，默认情况下会选择5并在最初显示。

如果我想通过选择5本身来触发ng-change怎么办？它不起作用。显然它不会工作，因为我们选择值5，它与之前的值相同。因此ng-change不会触发。我明白了这一点。

但我有一个场景，我想在用户再次选择默认值时触发一个功能。有人可以帮助我。

PS-我不能使用ng-click，因为它会在我们单击选项标签后立即触发事件。所以它不允许你从下拉列表中选择并立即发射事件。

Answer 1

尝试使用ng-change调用控制器中查看所选选项的函数，并确定它是否为默认选项。只要用户选择默认选项，您就可以调用任何您想要的代码。

示例（HTML）：

<select
    ng-change='myChangeFunction()' 
    ng-model="mySelectedOption"
    ng-options="myOptions">
</select>

示例（JS）：

$scope.myOptions = [
    { id: "5", name: "5" },
    { id: "10", name: "10" },
    { id: "15", name: "15" }
];

$scope.myChangeFunction = function() {
    if($scope.mySelectedOption.id === 5) {
        // Default value has been selected, call your function
    }
};

Answer 2

ng-change/watch 仅在更改模型时有效，或者您可以使用ng-selected指令，

 <select ng-model="bob" ng-selected="test()">

DEMO

Answer 3

尝试将ng-model值传递给您的函数。

<强> HTML

<select ng-model="bob" ng-click="test(bob)">
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

<强>的Javascript

$scope.test = function (value) {
 alert ("changed to "+ value);   
}

Answer 4

这可能对你有所帮助。

<select ng-model="bob" ng-change="test()">
  <option disabled value="">Select value ...</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

在这里，我创建了另一个选项，该选项被禁用并用作占位符来选择选项。您可能不需要再次触发值为5的选项。

请检查JSFiddle是否有任何疑问。

希望这有帮助。谢谢。

在选择选项标签上触发ng-change功能

4 个答案: