在選擇選項標簽上啟用ng-change功能

Question

我在這里有一個奇怪的查詢。 請參考這個jsfiddle

http://jsfiddle.net/ctbLparv/

<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變化不會觸發。 我明白這一點。

但是我有一種情況，當用戶再次選擇默認值時，我想觸發一個功能。 有人可以幫我嗎

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 。

希望這會有所幫助。 謝謝。