0

実際のチェックボックスを非表示にし、実際のチェックボックスではなく拡張コンポーネントを表示するカスタム jquery-plugin があります。

このコードの

<label for="local">
  <input type="checkbox" ng-model="value" ng-change="filterByCoursePlace('test')"  name="local"  id="local"><span>Local</span>
</label>

プラグインはこのコードを生成します (チェックボックスの上に div を追加します)

<label for="local">
  <div class="jcf-class-ng-pristine jcf-class-ng-valid chk-area chk-unchecked chk-focus"><span></span></div>
  <input type="checkbox" ng-model="value" ng-click="filterByCoursePlace('test')" name="local" id="local" class="ng-pristine ng-valid"><span>Local </span>
</label>

大きな四角は偽物 (ユーザーに表示される) で、小さな四角は本物です。実際のチェックボックスはユーザーには表示されません。

ここに画像の説明を入力

問題は次のとおりです。実際のものをクリックすると ng-change が機能しますが、偽物をクリックすると、実際のものもチェックされますが、偽の ng-change は機能しません。

4

2 に答える 2

1

jQuery プラグインはどの程度変更できますか? 生成されたコードには がありng-click="filterByCoursePlace('test')ます。そのため、実際のコードをクリックすると機能します。あなたが望むことをするための最も簡単な方法は、あなたのコントローラーにすべてを削除するng-change/ng-click追加することですwatch:

$scope.$watch('value', function(newVal, oldVal) {
    filterByCoursePlace('test')
});

または、プラグインがコードを生成する方法を変更できる場合ng-clickは、実際のチェックボックスの代わりに偽のチェックボックスを追加できます。とにかく、別の機能（「resetFilters」ボタンなど）によって変更されたfilterByCoursePlaceときにもトリガーしたい場合は、その方法で行きます。value$scope.$watch

于 2014-04-11T11:20:43.680 に答える