11

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 マイル」無線入力は、radii スコープ構造に基づいてチェックされることに注意してください。ng-change が関数をトリガーしないのはなぜですか?

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

4

4 に答える 4

12

これは、次を使用していないためです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>

アップデート：

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

UPDATED PLUNKER [ 2014年9月]

ジャバスクリプト

コントローラ

  $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月]

ng-change以下の dcz.switcher の問題は、ラジオ ボタンが再選択されたときに、上記のソリューションがイベント ハンドラーをトリガーしないことを示唆しています。主な問題は、が のスコープ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>
于 2014-08-23T02:29:31.283 に答える
2

これは、ng-changeが ngModel の存在を必要とするためです。

お役に立てれば。乾杯！

于 2014-08-23T02:36:09.177 に答える