2017-03-21 4 views
0

私はここで奇妙なクエリを持っています。あなたはこのフィドルで見ることができるように、私はオプション5,10および15を持っているユーザーは10または15を選択した場合、NG-変更イベントがトリガされます選択オプションタグで火災の変更機能

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> 

このjsfiddleを参照し、警告してくださいメッセージがポップアップします。あなたが気づいたように、ここではデフォルトで5が選択され、最初に表示されます。

5を選択してng-changeを実行したい場合はどうすればいいですか?それは仕事をしません。明らかに、値5を選択していて以前の値と同じ値だったので、動作しません。それゆえに、変化は起こらないでしょう。私はこの点を得る。

私はシナリオを持っていますが、ユーザーがデフォルト値を再度選択したときに関数をトリガーしたいと思っています。誰かがこれで私を助けてくれますか?

PS - 私はオプションタグ自体をクリックするとただちにイベントを発生させるので、クリックは使用できません。そのため、ドロップダウンから選択することはできず、すぐにイベントが発生します。

答えて

0

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 
    } 
}; 
+0

コードが行っていることの説明を追加してください。 – Soviut

0

ng-change/watch作品、別の方法としては、NG-選択を使用することができます指令

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

DEMO

+0

これは完全に間違っています。 'ng-selected'指示文は' selected'属性を条件付きで追加するためのものです。 https://docs.angularjs.org/api/ng/directive/ngSelectedをご覧ください。 – oBusk

0

関数に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); 
} 
0

おそらくこれはあなたを助けるかもしれません。

<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> 

ここでは、無効にしてオプションを選択するためのプレースホルダとして使用するもう1つのオプションを作成しました。あなたは値5のオプションを再びトリガーする必要はないでしょう。

JSFiddleをご確認ください。

希望すると便利です。ありがとうございました。

関連する問題