AngularJs: Как установить переключатель проверено на основе модели

у меня есть модель, возвращаемая в объект storeLocations со значением isDefault. если isDefault возвращает true, я не хочу устанавливать этот переключатель в группе, как указано.

Не уверен, что мне нужно сделать $each(data,function(index, value) и перебирать каждый возвращаемый объект или если есть более простой способ сделать это с помощью угловых конструкций.

5 54
javascript angularjs radio-group

5 ответов:

использовать ng-value вместо value.

ng-value="true"

версия ng-checked - Это хуже, из-за дублирования кода.

63

если у вас есть группа переключателей, и вы хотите установить переключатель, проверенный на основе модели, то переключатель, который имеет то же самое value и ng-model, проверяется автоматически.

<input type="radio" value="1" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="2" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="3" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="4" ng-model="myRating" name="rating" class="radio">

, если значение myRating - это "2", то второй переключатель выбран.

52

в конечном итоге просто с помощью встроенного углового атрибута ng-checked="model"

21

один из способов, который я вижу более мощным и избежатьisDefault во всех моделях используется ng-атрибуты ng-model,ng-value и ng-checked.

ng-model: привязывает значение к вашей модели.

ng-value: значение для передачи в ng-model привязка.

НГ-проверено: значение или выражение, которое вычисляется. Полезен радиокнопки и флажки.

пример использования: В следующем примере, у меня есть модель и список языков, которые поддерживает мой сайт. Чтобы отобразить различные поддерживаемые языки и обновить модель с помощью выбранного языка, мы можем сделать это таким образом.

<!-- Radio -->
<div ng-repeat="language in languages">

  <div>
    <label>

      <input ng-model="site.lang"
             ng-value="language"
             ng-checked="(site.lang == language)"
             name="localizationOptions"
             type="radio">

      <span> {{language}} </span>

    </label>
  </div>

</div>
<!-- end of Radio -->

модель site.lang будет language значение всякий раз, когда выражение под оценкой (site.lang == language) - это правда. Это позволит вам легко синхронизировать его с сервером, так как ваша модель уже есть изменения.

20

Как обсуждалось несколько в комментариях к вопросу, это один из способов сделать это:

  • при первом извлечении данных выполните цикл по всем расположениям и установите storeDefault в хранилище, которое в настоящее время является хранилищем по умолчанию.
  • в коде: <input ... ng-model="$parent.storeDefault" value="{{location.id}}">
  • перед сохранением данных, цикл через все торговца.storeLocations и установить isdefault имеет значение false, за исключением магазина, где место.идентификатор сравнивается равный storeDefault.

выше предполагается, что каждое местоположение имеет поле (например, id), которое содержит уникальное значение.

обратите внимание, что $parent.storeDefault используется потому, что ng-repeat создает дочернюю область, и мы хотим управлять параметром storeDefault в родительской области.

Скрипка.

2