3

選択リストを生成するために使用する<select>要素があり、できれば選択したものを の値に設定します。これが私のhtmlです：ng-optionsng-model

<td style="text-align:center">
    <ng-form name="IsTobaccoForm">
        <select name="Input" required ng-model="dep.IsTobacco" ng-options="item.value as item.text for item in yesNoList"></select>{{dep.IsTobacco}}
        <span class="alert-error" ng-show="IsTobaccoForm.Input.$error.required"><strong>*Required</strong></span>
    </ng-form>
</td>

私のコントローラーには次のコードが含まれています：

$scope.yesNoList = [{ value: true, text: 'Y' }, { value: false, text: 'N'}];

アイテムの値が true の場合IsTobacco、値は適切に設定されており、すべて問題ありません。ただし、false の場合は、{{dep.IsTobacco}}false としてレンダリングされますが、必要なエラーが表示されます。本当に奇妙な部分は、リストで選択した項目を true に変更すると正常に動作しますが、false に設定すると、新しい空白の項目がリストに追加され、その空白の項目が選択されます。

問題が上記の行にないと思われる場合は、喜んでさらにコードを投稿できます。

ありがとう！

編集: Chrome デバッガーも使用しましたが、データが Angular で開始されたときに、 の値がIsTobaccoに等しいことがわかりましたfalse。

編集 2:これを見ている人が AngularJS を初めて使用する場合は、パート 1とパート 2の 2 つの記事を読むことを強くお勧めします。AngularJS フォームの概要です。

4

1 に答える 1

3

これが発生する理由は、と一緒に使用すると、 の値がfalseの欠如として解釈されるためです。hereで説明したように、Angular ソースからの抜粋を検討してください。ngModelrequired

var validator = function(value) {
    if (attr.required && (isEmpty(value) || value === false)) {
        ctrl.$setValidity('required', false);

必須属性があり、その値が の場合false、検証に合格しません。これはおそらく、必要なチェックボックスをより簡単に検証するための意図的なものです。この場合、未チェックのデフォルト値は ですfalse。

ng-true-valueチェックボックスが属性を取ることができることを考えると、このようにする必要はないかもしれませんが、これを行うか、すべてのチェックボックスでそれらの属性に非値と非値ng-false-valueの使用を強制するかのいずれかだったと思います。これはより良い選択でした.truefalse

1 つの回避策は、代わりに文字列 'true' と 'false' を使用することです。

于 2013-06-18T02:17:05.100 に答える