角度のラジオボタンから値を取得する

Question

ラジオボタンの角度の文書に従おうとしています。 https://docs.angularjs.org/api/ng/input/input%5Bradio%5D 私が間違っていることを知りません。

は最終的に、私はラジオオプション3を選択した場合はdivの「もの」は、クラス「ミュート」を持っていると思います。

私のhtml：

<form name="shippingVm.MasterCartonForm" ng-controller="shippingControler as shippingVm" > 

    [{{shippingVm.shipOption.val}}] 

    <div class="col-sm-3 col-sm-offset-1"> 
     <label class="radio-inline"> 
      <input type="radio" ng-model="shippingVm.shipOption.val" name="shippingOptions" ng-value="one" /> 
      I will call Purolator for a pickup. 
     </label> 
    </div> 
    <div class="col-sm-3"> 
     <label class="radio-inline"> 
      <input type="radio" ng-model="shippingVm.shipOption.val" name="shipOptions" ng-value="two" /> 
      I will deliver them to Purolator. 
     </label> 
    </div> 
    <div class="col-sm-4"> 
     <label class="radio-inline"> 
      <input type="radio" ng-model="shippingVm.shipOption.val" name="shipOptions" ng-value="muted" /> 
      I will deliver them to the Wizmo warehouse myself. 
     </label> 
    </div> 

    <div class="ng-class="shippingVm.shipOption.val"> 
     stuff 
    </div> 

</form> 

私のコントローラ：

vm.shipOption = {val: "NOT-muted"}; 

HTMLチェックでこのデバッグ行私は正しい値を得ているかどうかを確認するために：

[{{shippingVm.shipOption.val}}] 

[NOT-muted] - そうするべきです。しかし、ラジオボタンを選択すると、それは空白になります。

ドキュメントによると、ラジオをクリックすると、ラジオの値がモデルに渡されます。

私には何が欠けていますか？

Answer 1

あなたNG-クラスれます間違った第二の問題は、あなたが値の代わりに、NG-値をしたいということで、それがどうあるべきかの例については、以下のスニペットを参照してくださいから：。。。値にngMode https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

値l式を選択すると設定されます。 valueは文字列値のみをサポートしています。つまり、スコープモデルも文字列でなければなりません。複雑なモデル（数値、オブジェクトなど）が必要な場合は、ngValueを使用します。

ngValue無線が選択されたときにngModelが設定される角度式。文字列以外のngModel（boolean、array、...）が必要な場合は、value属性の代わりに使用する必要があります。

.muted { 
 
    color: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app> 
 
    <label>Chicken or the Egg?</label> 
 
    <div class="form-group"> 
 
    <div class="radio"> 
 
     <label> 
 
     <input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">Chicken 
 
     </label> 
 
    </div> 
 
    <div class="radio"> 
 
     <label> 
 
     <input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">Egg 
 
     </label> 
 
    </div> 
 
    </div> 
 
    <div ng-class="{'muted': formData.chickenEgg === 'egg'}"> 
 
    stuff 
 
    </div> 
 
</div>

Answer 2

ああ、私は今それを参照してください。

ラジオボタンは「 =ミュート値 = "ミュート" ではないNG-値を持つ必要があります。

NG-値は特殊なケースで使用されている。