javascript - example - AngularJs: Cómo configurar el botón de radio seleccionado según el modelo

radio button angular 6

Question

Tengo un modelo que regresa en el objeto storeLocations con un valor de isDefault. si isDefault devuelve verdadero, quiero configurar ese botón de radio en el grupo como está marcado.

No estoy seguro de si necesito hacer $ cada uno (datos, función (índice, valor) e iterar a través de cada objeto devuelto o si hay una forma más fácil de hacerlo mediante construcciones angulares.

Objeto:

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

Margen:

    <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>

Answer 1

Como se discutió un tanto en los comentarios de la pregunta, esta es una forma en que podría hacerlo:

• Cuando recupera los datos por primera vez, recorra todas las ubicaciones y establezca storeDefault en la tienda que actualmente es la predeterminada.
• En el marcado: <input ... ng-model="$parent.storeDefault" value="{{location.id}}">
• Antes de guardar los datos, recorra todos los merchant.storeLocations y configure isDefault como falso, excepto para la tienda donde location.id se compare con storeDefault.

Lo anterior supone que cada ubicación tiene un campo (por ejemplo, id) que tiene un valor único.

Tenga en cuenta que $ parent.storeDefault se utiliza porque ng-repeat crea un ámbito hijo y queremos manipular el parámetro storeDefault en el ámbito primario.

Fiddle .

Answer 2

Si tiene un grupo de botones de opción y desea establecer el botón de radio marcado según el modelo, el botón de opción que tiene el mismo value y ng-model se verifica automáticamente.

<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">

Si el valor de myRating es "2", se selecciona el segundo botón de myRating .

Answer 3

Terminó simplemente usando el atributo angular incorporado ng-checked="model"

Answer 4

Una de las formas en que veo más poderosa y evito tener un isDefault en todos los modelos es mediante el uso de ng-attributes ng-model , ng-value y ng-checked .

ng-model : vincula el valor a su modelo.

ng-value : el valor para pasar al enlace ng-model .

ng-checked : valor o expresión que se evalúa. Útil para botón de radio y casillas de verificación.

Ejemplo de uso: en el siguiente ejemplo, tengo mi modelo y una lista de idiomas compatibles con mi sitio. Para mostrar los diferentes idiomas compatibles y actualizar el modelo con el idioma de selección, podemos hacerlo de esta manera.

<!-- 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 -->

Nuestro site.lang modelo obtendrá un valor de language siempre que la expresión en evaluación (site.lang == language) sea ​​verdadera. Esto le permitirá sincronizarlo fácilmente con el servidor ya que su modelo ya tiene el cambio.

Answer 5

Use ng-value lugar de value .

ng-value="true"

La versión con ng-checked es peor debido a la duplicación del código.