web-dev-qa-db-ja.com

ng-checkedとng-changeラジオボタンが一緒に機能しない-angularjs

http://plnkr.co/edit/RP9SpO1qGjn5Ua6pZJ3D?p=preview

js

angular.module("sampleapp", []).controller('samplecontroller', function($scope,$rootScope) {
  $scope.radii = [
    {id:.25, checked:false, name:"1/4 Mile"},
    {id:.5, checked:false, name:"1/2 Mile"},
    {id:1, checked:false, name:"1 Mile"},
    {id:2, checked:true, name:"2 Mile"},
    {id:3, checked:false, name:"3 Mile"},
    {id:4, checked:false, name:"4 Mile"},
    {id:5, checked:false, name:"5 Mile"}
];

$scope.handleRadioClick = function(){
    alert();

};
});

とhtml

          <div class="radio">
            <label>
              <input type="radio" name="radius"

                   ng-change="handleRadioClick()"
                   ng-checked="radius.checked">

              {{radius.name}}

            </label>
          </div>

      </li>

半径スコープ構造に基づいて「2マイル」の無線入力がチェックされることに注意してください。 ng-changeが関数をトリガーしないのはなぜですか？

Ng-modelを追加すると、関数はトリガーされますが、ng-checkedが機能しません。

angularjsangularjs-ng-modelangularjs-ng-changeangularjs-ng-checked
11
webmandman

これは、ng-modelを使用していないためです。

フォークプランカー

<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick(selectedRadius)"
         ng-model="radius.checked">

    {{radius.name}}

  </label>
</div>

UPDATE：

デフォルトのラジオボタンをオンにしたかったことに気づかなかったのは残念ですが、そうである場合は、そのアプローチが正しくありません。モデルはラジオボタンのグループ内の非個別のパーツと見なす必要がありますが、全体として、代わりに1つの値であると見なされます。 selectedRadiusモデルとして別のng-repeatを使用する代わりに、ng-modelの無線スコープ変数を使用する必要はありません。入力無線には値が必要です。この場合、ng-valueを使用してモデルの現在の値を決定します。

PDATED PLUNKER[2014年9月]

[〜＃〜] javascript [〜＃〜]

コントローラー

  $scope.radii = [
    {id:.25, name:"1/4 Mile"},
    {id:.5, name:"1/2 Mile"},
    {id:1, name:"1 Mile"},
    {id:2, name:"2 Mile"},
    {id:3, name:"3 Mile"},
    {id:4, name:"4 Mile"},
    {id:5, name:"5 Mile"}
  ];

  // selected value is {id:2, name:"2 Mile"}
  $scope.selectedRadius = $scope.radii[3];

[〜＃〜] html [〜＃〜]

<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick(radius)"
         ng-model="selectedRadius"
         ng-value="radius">

    {{radius.name}}

  </label>
</div>

UPDATED PLUNKER [2015 1月]

以下のdcz.switcherの問題により、ラジオボタンが再度選択されたときに、上記のソリューションがng-changeイベントハンドラーをトリガーしないことが示唆されました。主な問題は、ng-modelがng-repeatのスコープを参照しており、2番目の変更からのコントローラーのスコープを参照していないことでした。この問題を解決するには、$parentプロパティを使用できます。代わりに、controllerAsエイリアスを使用し、エイリアス自体を使用してコントローラーのプロパティにアクセスすることもできます。 AngularJSのスコープの詳細を理解するには、ここで詳細を読むをお勧めします。

[〜＃〜] html [〜＃〜]

<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick($parent.selectedRadius)"
         ng-model="$parent.selectedRadius"
         ng-value="radius">

    {{radius.name}}

  </label>
</div>
11
ryeballar

デフォルト値を使用すると、すべてが魅力のように機能し、$ watchスコープなどは必要ありません...そしてはい、ng-modelが必要です

  • ng-model-すべての作業を行います
  • ng-checked-CHECKED属性が存在することを確認します
  • ng-change-変更時に関数をトリガーします

HTMLの例：

<input type="checkbox" 
    ng-model="row.active"
    ng-checked="row.active"
    ng-true-value="1"
    ng-false-value="0"
    ng-change="update(row)"
/>
<!-- test -->
{{ row.active }}

JSオプション：

$scope.update = function(row) {
    console.log('row.active');
}
4
Playnox

これは、ng-change にはngModelが存在する必要があるためです

お役に立てれば。乾杯！

2
jleljedal

ng-changeディレクティブには、ng-modelディレクティブが存在する必要があります。

ドキュメントから：

ngChange

このディレクティブにはngModelが必要です。

— AngularJS ng-changeディレクティブAPIリファレンス

ng-modelおよびng-checkedディレクティブは一緒に使用しないでください

ドキュメントから：

ngChecked

ngChecked内の式が真である場合、要素にチェック属性を設定します。

このディレクティブをngModelと一緒に使用しないでください。予期しない動作が発生する可能性があります。

— AngularJS ng-checkedディレクティブAPIリファレンス

代わりに、コントローラーから目的の初期値を設定します。

詳細については、

0
georgeawg