Получение значения от угловых переключателей

Question

Я стараюсь следовать угловым документам для переключателей. https://docs.angularjs.org/api/ng/input/input%5Bradio%5D Не знаю, что я делаю неправильно.

В конечном счете, я хочу, чтобы div «stuff» имел класс «приглушенный», если выбран вариант радио 3.

мой 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}}] 

Начало работы: [НЕ-приглушенный] - как следует. Но в тот момент, когда я выбираю любой переключатель, он становится пустым.

В соответствии с документами щелчок радиоприемника должен передать значение радиоприемника.

Что мне не хватает?

Answer 1

Ваших нг-класс .. некорректный См ниже фрагмент кода для примера того, что она должна быть Вторая проблема заключается в том, что вы хотите, значение вместо нг-значения. от: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

значение значение, к которому ngMode l выражение должно быть установлено при выборе. Обратите внимание, что значение поддерживает только строковые значения, т. Е. Модель области тоже должна быть строкой. Используйте ngValue, если вам нужны сложные модели (число, объект, ...).

ngValue Угловое выражение, на которое будет установлено ngModel, когда выбрано радио. Должен использоваться вместо атрибута value, если вам нужен нестрочный ngModel (boolean, array, ...).

.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

О, я вижу это сейчас.

Кнопка радио должна иметь значение = «приглушенные» не нг-значение = приглушенный».

нг-значение используется только в частном случае.