70

select を使用してブール値を true または false に設定したいのですが、コードは次のとおりです。

<select class="span9" ng-model="proposal.formalStoryboard">
<option value="false">Not Included</option>
<option value="true">Included</option>
</select>

値(proposal.formalStoryboard)はtrueまたはfalseに適切に設定されていますが、値が既に割り当てられている場合、変更は選択ボックスに反映されません。

値の代わりに ng-value="true" と ng-value="false" を試しましたが、うまくいきません。

4

10 に答える 10

90

編集:コメンテーターは、私の元のソリューションが主張どおりに機能しなかったと指摘しました。以下の他の人からの正しい回答を反映するように回答を更新しました（受け入れられた回答を削除することはできません）。

Angular 1.0.6 の場合、次の HTML を検討してください。

<div ng-app="">
  <div ng-controller="MyCntrl">
    <select ng-model="mybool"
            ng-options="o.v as o.n for o in [{ n: 'Not included', v: false }, { n: 'Included', v: true }]">
    </select>
    <p>
        Currently selected: <b>{{ mybool }}</b> opposite: {{ !mybool }}
   </p> 
 </div>
</div>

そしてこの JavaScript:

function MyCntrl($scope) {
    $scope.mybool = true;
}

これはAngular 1.0.6 の動作する DEMO であり、Angular 1.3.14 の動作するDEMOです。これはわずかに異なります。

于 2013-07-19T19:52:52.707 に答える
59

次のようにしてください：

<select ng-model="someModel" ng-options="boolToStr(item) for item in [true, false]">
</select>

次のように定義します。

$scope.boolToStr = function(arg) {return arg ? 'Included' : 'Not included'};
于 2013-08-08T14:40:47.577 に答える
34

なぜこれを使わないのですか？

<select class="form-control" ng-options="(item?'Included':'Not Included') for item in [true, false]"></select>
于 2015-07-26T11:27:54.883 に答える
0

I had very little success with this frustrating issue. My solution, while not too elegant since it's an additional line of code, solved it every time. This may not work in every application.

$scope.myObject.myBooleanProperty = $scope.myObject.myBooleanProperty.toString();

Turning it into a "real" string before trying to rebind it to the model displayed on the page allowed it to correctly select the value.

于 2015-02-09T01:02:47.983 に答える
0

Angular は、ng-model への値のバインドと、指定されたオプションの値との間で厳密な比較を行います。最初の質問で指定された値は、文字列「false」と「true」です。ng-model の値が bool 型で、{"Value":false} のように定義されている場合、文字列と bool の間の Angular の厳密な === 比較は決して一致しないため、選択ボックスは空になります。

本当の問題は、値を選択すると、タイプが bool から文字列に変更された場合 ({"Value":false} --> {"Value":"false"}) が返されるとエラーが発生する可能性があることです。

私にとって両方の問題に対する最良の解決策は、この投稿の Thiago Passos の解決策でした。( https://stackoverflow.com/a/31636437/6319374 )

于 2016-05-11T13:09:04.293 に答える