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

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

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

Объект:

storeLocations = [
 {
  ... more values,
  isDefault: true
 }
]

Разметка:

    <tr ng-repeat="location in merchant.storeLocations">
        <td>{{location.name}}</td>
        <td>{{location.address.address1}}</td>
        <td>{{location.address.address2}}</td>
        <td>{{location.address.city}}</td>
        <td>{{location.address.stateProvince}}</td>
        <td>{{location.address.postalCode}}</td>
        <td>{{location.address.country}}</td>
        <td>{{location.website}}</td>
        <td>{{location.zone}}</td>
        <td><input type="radio" ng-model="location.isDefault" value="{{location.isDefault}}" name="isDefault_group"></td>

Ответы

Ответ 1

Вместо value используйте ng-value value.

ng-value="true"

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

Ответ 2

Если у вас есть группа переключателей, и вы хотите установить радиокнопку на основе модели, то переключатель, который имеет одинаковое 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", тогда выбирается вторая радиокнопка.

Ответ 3

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

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

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

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

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

<!-- 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) истинно. Это позволит вам легко синхронизировать его с сервером, так как ваша модель уже имеет изменения.

Ответ 4

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

Ответ 5

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

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

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

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

Скрипт.

Ответ 6

Просто сделайте что-то вроде этого, <input type="radio" ng-disabled="loading" name="dateRange" ng-model="filter.DateRange" value="1" ng-checked="(filter.DateRange == 1)"/>