2016-10-12 27 views
0

ng-modelディレクティブを含む選択ボックスがあります。ユーザーが選択ボックスをクリックするとイベントが発生します(オプションを選択する前にトリガーされます)。AngularJS Select box - ngClickが発砲しない

<select id="count" name="count" class="form-control" ng-click="vm.clickCountSelector();" ng-model="vm.count" 
ng-options="c.name for c in vm.getEligibleCountList()" required validation-messages></select> 

ただし、vm.clickCountSelector()は実行時に起動しません。どうすればこれを達成できますか?このイベントを引き起こす方法はありますか?

ありがとうございます!

+0

コードをデバッグしましたか?表示されているエラーは何ですか? –

答えて

2

あなたが達成しようとしていることがわかりませんが、select要素のng-changeにバインドすることをお勧めします。オプションを選択すると、クリックが発生します。

本当にイベントを取得したい場合は、ng-mousedownを使用できます。

var ngApp = angular.module('ngAppl',[]); 
 

 
function aControlla($scope){ 
 
    $scope.count = function(){ 
 
     alert("It works!"); 
 
    } 
 
    
 
    $scope.values = [ 
 
     {Name: "Entry 1"}, 
 
     {Name: "Entry 2"}, 
 
     {Name: "Entry 3"}, 
 
     {Name: "Entry 4"} 
 
    ]; 
 
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> 
 
<div ng-app="ngAppl"> 
 
    <div ng-controller="aControlla"> 
 
     
 
     <select ng-mousedown="count(val)" ng-model="val"> 
 
      <option ng-repeat="val in values" value ={{val.Name}}> 
 
      {{val.Name}} 
 
      </option> 
 
     </select>   
 
    </div> 
 
</div>

+0

ありがとう!はい、ng-mousedownは動作します! – masterFly

0

ng-clickの代わりにng-changeを使用する必要があります。

+0

しかし、ユーザーが選択ボックスをクリックしたかどうかを知りたい。 – masterFly

+0

次に、vm.clickCountSelector()が起動していない理由を調べてください。あなたが言ったように、今はただ警告しているだけですが、ブラウザー上で警告を表示しなかったためにその機能が起動されたことに気付かなかったかもしれません。私のアドバイスは、常にconsole.log( "Something")でコードをデバッグして、何かが起きたかどうかをコンソールで確認することです。 – alxbxbx

0

あなたはあなたの関数の呼び出しで$イベントを追加しようとしたのですか?

vm.clickCountSelector($event) 
0

このお試しください: - あなたの代わりにクリックngのngの変更を行うことができますselectタグに

angular.module('app', []).controller('NgListController', function($scope) { 
 
    $scope.items = [{ 
 
    name: 'Item1' 
 
    }, { 
 
    name: 'Item2' 
 
    }]; 
 

 

 
    $scope.clickCountSelector = function() { 
 

 
    alert('select clicked'); 
 
    } 
 

 

 

 
});
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <fieldset ng-controller="NgListController"> 
 
    <select id="count" name="count" class="form-control" ng-click="clickCountSelector();" ng-model="vm.count" ng-options="c.name for c in items" required validation-messages></select> 
 
    </fieldset> 
 
</body> 
 

 
</html>

0

を。それをキャプチャしたい場合は、選択したタグをpまたはdivタグ内に保持し、それらのタグにng-clickを使用します。 pタグまたはdivタグ内に複数のタグがある場合は、クリックを区別できない場合があります。

関連する問題