web-dev-qa-db-ja.com

ng-modelでng-checkedされたラジオボタン

HTMLページには、2つのブールベースのラジオボタンのセットがあります。ラベル付き：「はい」と「いいえ」/値：TrueとFalse。 PostgreSQLデータベーステーブルから完全なフォームにデータを入力して、認証されたユーザーがデータが入力されたフォームを表示し、ラジオボタンを含むデータが入力されたフィールドを編集し、データをDBに保存するフォームを保存できるようにします。他のすべてのテキストフィールドは問題なく入力されます。両方のラジオボタンのコレクションであり、ラジオボタンの事前チェックマークに問題があります。

以下は、フロントエンドでオンのチェックを事前設定しません（ただし、HTMLソースにcheckedの正しい属性を追加します）：

    <input id="billing-no" type="radio" name="billing" ng-model="person.billing" value="FALSE" ng-checked="person.billing == 'false'" />
    <input id="billing-yes" type="radio" name="billing" ng-model="person.billing" value="TRUE" ng-checked="person.billing == 'true'" />

ただし、これはロード時に正しいラジオボタンをチェックします。

    <input id="billing-no" type="radio" name="billing" value="FALSE" ng-checked="person.billing == 'false'" />
    <input id="billing-yes" type="radio" name="billing" value="TRUE" ng-checked="person.billing == 'true'" />

注：ブール値は常にPostgreSQLから文字列として返されるため、ng-checkedディレクティブの文字列ブール値と照合する必要がありました。これは、ブールデータ型の列からデータをクエリする際のPostgreSQLの設計の一部であったようです。

Ng-modelディレクティブを追加するとき、ラジオボタンはチェックされなくなりました（少なくともレンダリングされたブラウザービューでは）。奇妙な部分は、ソースを見て、それが明らかに正しいものをチェックしていることです。さらに奇妙なことに、ラジオボタンを2回クリックして「チェック」する必要があります。これを最新バージョンのChrome、FF、およびIEでテストしましたが、すべて同じ結果になります。

問題は、ng-modelディレクティブを追加するとき、HTMLソースがラジオボタン属性に「checked」を追加するのに、ラジオボタンをマークしないように見えるのはなぜですか？さらに、なぜISチェックすることになっているはずのラジオボタンを2回クリックする必要がありますか？

解決策：これを修正するために、ラジオボタンからng-checkedディレクティブを削除し、@ Cypherと@aetによって提案されたng-modelのみを使用しました。次に、属性valueをディレクティブng-value "true"＆ "false"に置き換えました。その後、コントローラーに値を設定します。

[〜＃〜] html [〜＃〜]

<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="false" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="true" />

Angular JS

app.controller('peopleCtrl', function($scope, peopleFactory){
    ...
    peopleFactory.getPerson(personParams).then(function(data){
        $scope.person = data;
        /* moved from ng-checked */
        $scope.person.billing = data.billing == 'true';
    });
    ...
};
angularjspostgresqlradio-buttonbooleanangular-ngmodel
15
RNickMcCandless

Ng-modelのみを使用する必要があり、うまく機能するはずです。ここにangular https://docs.angularjs.org/apiの公式ドキュメントへのリンクがあります。/ng/input/input％5Bradio％5D

例のコードは、特定の状況に適応するのが難しくないはずです。

<script>
   function Ctrl($scope) {
      $scope.color = 'blue';
      $scope.specialValue = {
         "id": "12345",
         "value": "green"
      };
   }
</script>
<form name="myForm" ng-controller="Ctrl">
   <input type="radio" ng-model="color" value="red">  Red <br/>
   <input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
   <input type="radio" ng-model="color" value="blue"> Blue <br/>
   <tt>color = {{color | json}}</tt><br/>
</form>
34
TlonXP

デフォルトの選択にng-initの代わりにng-checkedを使用するだけで問題を解決しました

<div ng-init="person.billing=FALSE"></div>
<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="FALSE" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="TRUE" />
7
X-Coder

[パーソナルオプション] John Papaに基づく$ scopeの使用を避ける Angular Style Guide

だから私のアイデアは現在のモデルを活用しています：

(function(){
  'use strict';
  
   var app = angular.module('way', [])
   app.controller('Decision', Decision);

   Decision.$inject = [];     

   function Decision(){
     var vm = this;
     vm.checkItOut = _register;

     function _register(newOption){
       console.log('should I stay or should I go');
       console.log(newOption);  
     }
   }

     
     
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div ng-app="way">
  <div ng-controller="Decision as vm">
    <form name="myCheckboxTest" ng-submit="vm.checkItOut(decision)">
 <label class="radio-inline">
  <input type="radio" name="option" ng-model="decision.myWay"
                           ng-value="false" ng-checked="!decision.myWay"> Should I stay?
                </label>
                <label class="radio-inline">
                    <input type="radio" name="option" ng-value="true"
                           ng-model="decision.myWay" > Should I go?
                </label>
  
</form>
  </div>
  
</div>

私が助けてくれることを願っています;）

3
davidwillianx

同じ_ng-model_が使用される理由を説明してください。そして、どの値が_ng- model_を介して渡され、どのように渡されますか？具体的には、console.log(color)を使用すると、出力はどうなりますか？

1
Rudrika