2012-12-18 32 views
55

どういうわけか、ng-modelを使用してブール値を指定すると、ブール値がtrueの場合はチェックボックスがチェックされ、falseの場合はチェックされません。AngularJS:逆のチェックボックスの状態

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

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"> 
+0

またはちょうどあなたがあなたのモデルを記述するために使用されるものは何でも言葉の否定を使用します。video.shownを:?チェックボックスをオンにするとコントローラの機能を使って他のモデルの値を設定することができます。私の意見では実際の問題ではありません。 – mpm

+0

@camus私が言った最後のことは、モデルを変更したくないということでした。もちろん、それは本当の問題ではありませんが、フレームワークが使いやすさを強調している場合、上記の私の最初の推測がうまくいかない理由はありません。 – Langdon

+1

関数を使用するのは、モデルを変更するのではなく、コントローラに関数を追加することです。そしてフレームワークは銀色の弾丸ではありません。しかし、これは容易に拡張することができます。それはとにかく、指示を書く必要があります。 – mpm

答えて

69

カスタムディレクティブを必要とせずに、今それを作ることができ、角度の支援をng-true-valueng-false-value

https://docs.angularjs.org/api/ng/input/input[checkbox]

あなたの例で動作するようになりました <input type="checkbox" ng-model="video.hidden" ng-true-value="false" ng-false-value="true">

+1

その解決策の問題は、表示されたときにチェックボックスにvideo.hidden値が表示されることです。 –

+0

1.3で修正されているように見えます。 – Langdon

+0

'ng-true-value'と' ng-false-value'と表示されますが、 'false'値はサーバに送られません。多分、それは成功したフォームコントロールとして扱われます。 –

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-変化に結合使うことができ、それはかなりの仕事をしていません。

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

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

編集

、「反転」属性は超シンプルで作り、同様にちょうどそれを行う可能性があります。ディレクティブを作成することは、最初は苦痛のように思えますが、実際には角度の方法です。

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ものの後に実行することを確認するために必要がある場合があります。

+0

ここに 'ngModel'引数は何ですか?それに関するドキュメントはありますか?それともDI魔法の一種ですか? –

+1

'link'の第4引数は、あなたが'必要なもの 'を反映しています。 – jpsimons

13

これはvideo.hiddenの反対だと、すぐにチェックボックスが変わるような値が更新されるvideo.checkedプロパティを紹介

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

を動作するようです。ここ

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

+0

ニース、これは動作するようです。しかし 'ng-init'の部分は必要ですか? 'ng-change'の中で、' input'にアクセスして、チェックされた状態を読み込まないのですか? – Langdon

+0

ビューをコンパイルすると 'ng-init'を指定せずに' video.checked'の値が 'undefined'になり、' video.hidden'が 'false'に設定されていてもチェックボックスがチェックされません。 'ng-init'を削除した場合は、コントローラから' videos'オブジェクトを修正し、そこから初期化を行う必要があります。 – jaime

+1

これで、ng-changeの内部でターゲットの 'input'にアクセスすることはできませんか?同様に、私は言うことができませんでした: 'ng-change =" video.hidden =!$ element.checked "' – Langdon

4

私のソリューションは、あなただけの「入力」に追加することを、指令「否定」を使用しています。 シンプルなので、コントローラを変更する必要はありません。

angular 
    .module("<< your module >>") 
    .directive('negate', [ 
     function() { 
      return { 
       require: 'ngModel', 
       link: function (scope, element, attribute, ngModelController) { 
        ngModelController.$isEmpty = function(value) { 
         return !!value; 
        }; 

        ngModelController.$formatters.unshift(function (value) { 
         return !value; 
        }); 

        ngModelController.$parsers.unshift(function (value) { 
         return !value; 
        }); 
       } 
      }; 
     } 
    ] 
); 

はこのようにそれを使用します。

<input type="checkbox" negate ng-model="entity.nologin"> 
0

私は次のようにチェックボックスのためのオンまたはオフ値を取得するための最も簡単な解決策は、チェックボックスの入力要素内NG-のinitディレクティブを追加することであると思う:

<input type="checkbox" ng-init="video = false" ng-model="video" > 

これはにあるチェックボックスの初期値を可能にします状態はチェックされていませんでした。フォームを送信すると、チェックボックスがオフの場合、返される値(またはコンソール)は '未定義'ではなく偽になります。チェックされていない場合はtrueになります。

あなたは真または偽の状態のためにカスタムメイドの値を追加したい場合は、使用することができます:input要素の内部

ng-true-value="'custom_true value'" 

ng-false-value="'custom_false value'" 

を。

<input type="checkbox" ng-init="video = false" ng-model="video" ng-true-value="'custom_true value'" ng-false-value="'custom_false value'"> 
0

私のソリューションは非常に簡単です:ちょうどNG-真値/NG-偽値を使用し、NG-偽の値にし、真の真の価値をngのfalseに設定のような 機能を元に戻します。

<input type="checkbox" ng-model="<<-- Your Model -->> " ng-true-value="false" 
 
      ng-false-value="true">

関連する問題