Angular.js: 機能:ngTrueValueは文字列以外の値を受け入れる必要があります

作成日 2012年07月25日  ·  60コメント  ·  ソース: angular/angular.js

ng-modelチェックボックスの場合、ngTrueValueは文字列のみをサポートします。 jsオブジェクトなどをサポートするために、実際には角度式とevalを受け入れて値を取得する必要があります。

PRs plz! forms moderate feature

最も参考になるコメント

面白いことに気づきました。 私がやろうとしていたこと、そしてその見た目から、多くの人がやろうとしてきたことは、実際には次の方法で達成できます。

ng-true-value="{{ myVariable | json }}"

これは、文字列値、ブール値、および数値をサポートします。 私が実際にこれが好きかどうかはまだわかりませんが、確かに面白いと思いました。 そして多分これは他の誰かを助けるでしょう。

全てのコメント60件

ngTrueValueの目的は完全にはわかりませんが、1つのケースでコントローラーに時計を追加するための便利なディレクティブのように見える点が異なります。 あるモデルを複雑な値に設定したい場合は、チェックボックスのモデルに$scope.$watchを設定し、それに応じてスコープのモデルを変更する方がクリーンな場合があると思います。

@coli 、特定のユースケースを念頭に置いていますか? @ IgorMinar@ mhevery 、@ vojtajina 、皆さんはどう思いますか?

ユースケースは実際にはかなり一般的です:

たとえば$ scope.categories = [{id:5、name: "First"}、...}にsayカテゴリオブジェクトの配列があります

次に、それらのカテゴリのサブセットを含むselectedCategories配列があります。

一部のカテゴリ(ページング)のチェックボックスを表示したいのですが、チェックボックスをオンまたはオフにすると、selectedCategoriesが変更されます。

上記のサポートを追加するために、デフォルトのチェックボックスの動作を上書きするディレクティブを実際に作成しました。 必要に応じてコードを共有できます。

私の使用法はこのようになりました、私の場合のようにオブジェクト比較を行うためにkeyFieldが必要でした、選択されたグループオブジェクトとグループオブジェクトは最初はわずかに異なる可能性があります(それらは2つの異なるバックエンドAPIから来ました)

<ng-repeat="group in groups>
    <input type='checkbox' ng-model="selectedArray" ng-true-value="group" mi-checkbox="{keyField:'id'}">
</>

ちなみに、私ははるかに単純なユースケースを持っていますが、それが機能しないことに失望しました-文字列ではなく整数が必要です!

テンプレートを使用してチェックボックスコントロールをレンダリングしています。 この場合、真の値を知ることはできません。その値は、レンダリングしたい特定の制御情報によって異なります。

私もng-true-valueが式であることを望みます。 チェックボックスの数が実行時に決定される場合は、タイムアウトラッパーを使用したスコープメソッドを使用する必要があります。

+1。 ng-true-valueでの式のサポート

+ 1ng-true-valueのサポート整数

文字列の代わりに式の+1

+1サポート式!

式の+1

+1サポートオブジェクト:

<div ng-repeat="group in groups">
    <input type='checkbox' ng-model="array[$index]" ng-true-value="group" />
</div>

@coliあなたが書いたディレクティブを共有していただけませんか? これがまだ検討されている問題である間、それは私にとって大きな助けになるでしょう。 多分要点で?

@brab残念ながら前の仕事で書きましたが、基本的にはチェックボックスの組み込みコードに似ており、カスタムディレクティブにコピーして貼り付け、式のサポートを追加しました。 (+組み込みのものを削除するための醜いハック)

表現は素晴らしいでしょう! ただし、整数のjavascriptの真理テストでさえ期待されます。 $ resourceを使用して、データベースブール値から整数値(1または0)を返すオブジェクトを設定します。 これらは、入力のng-modelがバインドされている$ scopeにアタッチされます。 ng-true-value = "1"を設定しても整数1がtrueとして認識されないことを知り、チェックボックスをオンにすると、本当に驚きました。 その間に言及された他の方法を調べます。

+1

式の+1

+1。 ng-true-valueでの式のサポート

表現をサポートすることで+1!
私の場合、フォームを動的に作成する必要があります。
例:http: //jsfiddle.net/federosky/N8Wjm/5/

整数の場合は+1

整数の場合は1+

整数(または任意のJS番号)の場合は+1

:+1:表現をサポートしてください! お願いします! お願いします! :-)

少なくとも整数をサポートする場合は+1、できれば式もサポートします。

誰かが番号をサポートするためのPRを提案するのはどうですか?

式の+1

整数の場合は+1

整数の場合は+1

+1

:+1:式用。

+1。 ページに「Visible」チェックボックスとして表示されるブールプロパティ「hidden」がある場合に問題が発生します。 したがって、「チェック済み」状態はFALSEを意味し、チェックなしは「TRUE」を意味する必要があります。

この問題の簡単な回避策は何でしょうか? 間接バインディングに使用するためだけに、独自のチェックボックスディレクティブを記述したり、逆補助ブールプロパティでスコープを汚染したりするのはあまり好きではありません。

これを実装するのはおそらくかなり簡単です、私は寝る前にそれを試してみます。

私のパッチは定数式のみをサポートしていますが、人々が本当にそれを必要とするのであれば、どんな式でも十分だと思います。 ただし、これは重大な変更を引き起こさないための最も簡単な方法でした。

+1

+1

+1

整数型の場合は+1

+1

式の+1

+1

+1

+1

+1

:+1:

これらは現在必要なハックです(多くのWTF):

<input type="checkbox" ng-model="fake" ng-checked="!notChecked" ng-change="notChecked = !notChecked"/>

+1

+1「+1」は2年になります。 なぜまだこれをサポートしていないのですか?

@ jancarloviray 、+ 1

残念:私にとって、これは物事がより複雑になったことを意味します。
以前使用しました
ng-true-value="{{proxyOnValue}}"
ここで、proxyOnValueはコントローラーで初期化されました。
(実際の値が異なるHTTP / HTTPS / FTP / POP3 / SMTPプロキシ構成でも同じビューが再利用されます。)

今試してみました
ng-true-value="proxyOnValue"
ただし、式が定数ではないため、例外がスローされます。

つまり、単純な実装(ngTrueValue)をより複雑な実装(watchまたはObject.defineProperty)に置き換える必要があるため、実際には意図したものとは逆になります。

なぜこの人為的な制限?
ただ

  • モデルが変更されるか、ユーザーがチェックボックスをクリックするたびに、ngTrueValue / ngFalseValueの現在の値を使用します
  • 適切な測定のために、ngTrueValue / ngFalseValue式(定数でない場合)を内部監視し、監視がトリガーされたときにチェックボックスの状態を更新します。

@ eekboom-補間を引き続き使用できます: http ://plnkr.co/edit/LQ6OpFjkjiFLxxMJ9hxj?p = Preview

@ petebacondarwin-彼は補間を使用できますが、それは彼を助けません: http ://plnkr.co/edit/nNwjEkPIDJwe60HWX950?p = preview
値は1回だけチェックされます。それ以降の変更はカウントされないため、常に初期値のみが使用されます。

@ dliebscher-私の理解では、 @ eekboomは一度だけ初期化したかったのです。

以前は、コントローラーでproxyOnValueが初期化されたng-true-value="{{proxyOnValue}}"を使用していました。

はい、いいえ:プロキシ構成がxhrを介してロードされた後でのみ、一度だけ初期化したいと思います。 したがって、ビューが初期化された後、(未定義から)1回変更されます。

@eekboom
1.2から移行していたとき、次のように切り替えました。

ng-true-value="{{proxyOnValue}}"

ng-true-value="'{{proxyOnValue}}'"

これは機能しますが、ばかげているように見えます

面白いことに気づきました。 私がやろうとしていたこと、そしてその見た目から、多くの人がやろうとしてきたことは、実際には次の方法で達成できます。

ng-true-value="{{ myVariable | json }}"

これは、文字列値、ブール値、および数値をサポートします。 私が実際にこれが好きかどうかはまだわかりませんが、確かに面白いと思いました。 そして多分これは他の誰かを助けるでしょう。

getu-lar私はあなたが言ったことを試しましたが、複雑なオブジェクトで動作します。 ng-false-valueにng-false-value="{}"を入力しました。データを処理する前に、フィルターを渡して、配列からすべての偽の値を切り取ります。 だから、どうもありがとう!

getu-larのソリューションは私のために働いた。 ありがとう。

「101_3」など、アンダースコアを含む文字列に解決される式を使用しようとしました。 私はgetu-larのソリューションを使用しましたが、それは単純に機能します。 しかし、ハックのように感じます。 共有してくれてありがとう!

式の+1

+1

Angularチームが1.xシリーズに適切なチェックボックスディレクティブを提供することはあまり期待されていないようです...それはそれほど難しいことではありません。 式のサポートは、引用符が必須であるため、完全な下位互換性があります。

それまでは、提案された回避策が私のために働いています:

ng-true-value="{{ myVariable | json }}"

myVariableがコントローラーで定義されていることを確認します。 ポストリンクで定義しようとしましたが、機能しませんでした。

このページは役に立ちましたか?
0 / 5 - 0 評価