8

Angular js を使用して select2 on-change イベントを発生させる際に問題が発生しています。

これが私のhtmlです：

<select ui-select2="{allowClear:true}" data-placeholder="Select a Department" ng-change="DoSomething()" class="input-max" ng-model="l.DepartmentID">
    <option value=""></option>
    <option ng-repeat="d in l.LineLookups.Departments" value="{{d.DepartmentID}}">{{d.Type}}</option> </select>

選択ドロップダウンが変更されると、変更イベントは発生しません。コントローラーのイベントハンドラーは次のとおりです。

$scope.DoSomething = function () {
        alert('here');
        ...
}

これを処理する最良の方法は何ですか? モデル値に注意するように言われました。それはうまくいきますか、それとももっと良い方法がありますか？

4

3 に答える 3

0

angular-ui ライブラリに jquery リスナーを追加すると、次のような角度イベントが発生します。

  // Set initial value - I'm not sure about this but it seems to need to be there
  elm.select2('data', controller.$modelValue);
  elm.on('change', function() {
      scope.$emit('select2:change', elm);
  });

そして、Angular イベント リスナーをコントローラーに登録します。

    $scope.$on('select2:change', function (event, element) {
        console.log('change fired by' + element.get(0).id);
    });
于 2014-03-21T15:34:15.590 に答える
0

ディレクティブを使用して select をカプセル化し、リンク関数で select 要素とイベント ハンドラーを取得するだけです。

マークアップ

<select data-ng-model="tagsSelection" ui-select2="select2Options">
    <option value="{{user.id}}" data-ng-repeat="user in users">{{user.name}}</option>
</select>

Javascript:

link: function (scope, element, attributes) {
    var select = element.find('select')[0];
    $(select).on("change", function(evt) {
        if (evt.added) {
            // Do something
        } else if (evt.removed) {
            // Do something.
        }
    });

    $scope.select2Options = {
        multiple: true
    }
}
于 2014-09-09T19:59:51.527 に答える