web-dev-qa-db-ja.com

選択ボックスの角度、ブール値

私はここでコードを選択してブール値を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"を試しましたが、うまくいきません。

javascriptangularjsboolean
64
Jerome Ansia

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

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;
}

動作する [〜＃〜] demo [〜＃〜] for Angular 1.0.6そして、動作する [〜＃〜] demo [〜＃〜] for Angular 1.3.14、これはわずかに異なります。

79
ChrisP

次のようにします。

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

そして定義する：

$scope.boolToStr = function(arg) {return arg ? 'Included' : 'Not included'};
58
ricofe25

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

<select class="form-control" ng-options="(item?'Included':'Not Included') for item in [true, false]"></select>
32
Thiago Passos

angularこれがサポートされるようになったバージョンはわかりませんが、ng-valueオプション要素。あなたのhtmlはこのように機能します。

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

また、ラジオとチェックボックスでも機能します。

4
Kieran

サンプルを作成しました。 this outを確認してください。

モデルを使用してUIバインディングを駆動したいですか？

<div ng-app ng-controller="Ctrl">
    <select class="span9" ng-model="proposal.formalStoryboard">
        <option value="false">Not Included</option>
        <option value="true">Included</option>
    </select>
    <button ng-click="changeValue();">Click</button>
<div>

function Ctrl($scope) {
    $scope.proposal = {};
    $scope.proposal.formalStoryboard = true;

    $scope.changeValue = function () {
        $scope.proposal.formalStoryboard = !$scope.proposal.formalStoryboard;
        console.log($scope.proposal.formalStoryboard);
    }
}
1
zs2020

これにはディレクティブを使用することをお勧めします。いつものように、より信頼性の高い直接的な制御を優先して、タイムアウトやその他の非同期操作を避けようとします。

directives.directive('boolean', function() {
  return {
    priority: '50',
    require: 'ngModel',
    link: function(_, __, ___, ngModel) {
      ngModel.$parsers.Push(function(value) {
        return value == 'true' || value == true;
      });

      ngModel.$formatters.Push(function(value) {
        return value && value != 'false' ? 'true' : 'false';
      });
    }
  };
});

優先度は、他のディレクティブ（通常は優先度が設定されておらず、デフォルトは0になります）の前に実行されるように特別に設定されます

たとえば、selectpicker bootstrapプラグイン内のselect要素をラップするselectpickerディレクティブで、このディレクティブを（true/false選択に対して）使用します。

編集：

ここで注意することは、私が言及するのを忘れていましたが、html値は文字列値である必要があるということです。ディレクティブが行うことは、ビューとモデルの間で変換し、モデル値をbooleanに、ビューをstring形式に保持することです：

%select.selectpicker{ ng: { model: 'modelForm.listed' }, selectpicker: '{ }', boolean: true }
  %option{ value: 'true' } Listed
  %option{ value: 'false' } Unlisted
1
Volte

これも機能します。値にangular式を入力することにより、値を強制的にブール値にします。

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

Angularは、ng-modelへの値のバインドと、指定されたオプションの値との厳密な比較を行います。最初の質問で指定される値は、ストリング「false」および「true」です。 ng-modelの値がbool型で、{"Value"：false}のように定義されている場合、Angulars strict === stringとboolの比較は一致しないため、select-boxは空です。

実際の問題は、値を選択すると、タイプがブールから文字列に変更された場合（{"Value"：false}-> {"Value"： "false"}）、ポストバックするとエラーが発生する可能性があることです。

私にとっての両方の問題に対する最善の解決策は、この投稿のチアゴ・パッソスのものでした。 （ https://stackoverflow.com/a/31636437/6319374 ）

0
zlit

私はこのイライラする問題でほとんど成功しませんでした。私のソリューションは、追加のコード行なのでエレガントではありませんが、毎回解決しました。これはすべてのアプリケーションで機能するとは限りません。

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

ページに表示されているモデルに再バインドしようとする前に、それを「実際の」文字列に変えることで、値を正しく選択することができました。

0
Tony Basallo