68

どういうわけか、Angular の魔法によって、ブール値を使用ng-modelして提供すると、そのブール値が true の場合はチェックボックスがオンになり、false の場合はオフになります。

<input type="checkbox" ng-model="video.hidden">

これだけでもかなり不可解ですが、実際にはチェック状態を逆にしようとしています。なぜなら、ボックスがチェックされることを意味する todo の例とは異なりtodo.done、私のモデルはtodo.incomplete.

残念ながら、私の最初の推測はうまくいきませんでした:

<input type="checkbox" ng-model="!video.hidden">

私はモデルが私に口述されている立場にあるので、それを変更することはできず、クライアントでそれをマッサージする必要はありません(クライアントオブジェクトをサーバーに送り返すためです。信頼できる環境で実行されている)。

アップデート

これは 1.3 で動作し、文字列を提供しません (1.2.xxx はブール値の代わりに文字列を提供しました):

<input type="checkbox" ng-model="video.hidden" ng-true-value="false" ng-false-value="true">
4

6 に答える 6

23

テンプレートだけでこれを行う方法はないと思います。これを実現する最も明白な方法は、モデル値に手動で二重バインドされる新しいスコープ変数を作成することです。以下のようなので：

<input type="checkbox" ng-model="videoShowing">

そしてあなたのコントローラーで：

$scope.videoShowing = !$scope.video.hidden;

$scope.$watch('video.hidden', function(value) {
  $scope.videoShowing = !value;
});
$scope.$watch('videoShowing', function(value) {
  $scope.video.hidden = !value;
}

ほとんどの場合、ng-change で一方向バインディングを使用できますが、それはうまくいきません。

<input type="checkbox" ng-checked="!video.hidden" ng-change="???">

ng-change は現在の値をローカル スコープにまったく混在させないためです。NgModelController にアクセスできるコンテキストにいた場合、何かを行うことができますが、そのためのカスタム ディレクティブが必要になります。NgModel のフォーマッターとパーサーを変更する「反転された」属性ディレクティブを作成することは難しくありません。逆さまのチェックボックスがたくさん必要な場合は、それをお勧めします。

編集

後世にとって、「反転」属性を作成するのは非常に簡単です。ディレクティブを作成することは、最初は面倒に思えますが、実際には Angular の方法です。

someModule.directive('inverted', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) { return !val; });
      ngModel.$formatters.push(function(val) { return !val; });
    }
  };
});

これらの人が組み込みのinputDirectiveのものの後に確実に実行されるように、優先度も設定するか、プッシュの代わりに「シフト解除」する必要があるかもしれません。

于 2012-12-18T04:33:31.327 に答える
14

これはうまくいくようです

<input  type="checkbox" 
        ng-init = "video.checked = !video.hidden"
        ng-model ="video.checked"
        ng-change ="video.hidden = !video.checked"/>

video.checked反対のプロパティを導入しvideo.hidden、チェックボックスが変更されるとすぐに値が更新されます。

例: http://plnkr.co/edit/7HYht6ubkUUJQ0r3g16m?p=preview

于 2012-12-18T04:44:17.143 に答える