webentwicklung-frage-antwort-db.com.de

AngularJs: So legen Sie fest, dass das Optionsfeld basierend auf dem Modell aktiviert ist

Im storeLocations-Objekt wird ein Modell mit einem isDefault-Wert zurückgegeben. Wenn isDefault true zurückgibt, wird dieses Optionsfeld in der Gruppe nicht als aktiviert markiert.

Ich bin mir nicht sicher, ob ich ein $ each (Daten, Funktion (Index, Wert)) ausführen und jedes zurückgegebene Objekt durchlaufen muss, oder ob es eine einfachere Möglichkeit gibt, dies mit den Konstrukten angular) zu tun.

Objekt:

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

Markup:

    <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>
javascriptangularjsradio-group
59
Christopher Marshall

Verwenden ng-value anstelle von value.

ng-value="true"

Version mit ng-checked ist schlechter wegen der Code-Duplizierung.

67
ivan.a.bovin

Wenn Sie eine Gruppe von Optionsfeldern haben und das Optionsfeld basierend auf dem Modell aktiviert haben möchten, wird das Optionsfeld, das das gleiche value und ng-model Hat, automatisch aktiviert.

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

Wenn der Wert von myRating "2" ist, wird das zweite Optionsfeld ausgewählt.

56
Rubi saini

Eine Möglichkeit, die ich leistungsfähiger sehe und vermeiden kann, in allen Modellen ein isDefault zu haben, ist die Verwendung der ng-Attribute ng-model, - ng-value und ng-checked.

ng-model: Bindet den Wert an Ihr Modell.

ng-value: Der Wert, der an die Bindung ng-model übergeben werden soll.

ng-checked: Wert oder Ausdruck, der ausgewertet wird. Nützlich für Optionsfelder und Kontrollkästchen.

Anwendungsbeispiel: Im folgenden Beispiel habe ich mein Modell und eine Liste der Sprachen, die meine Site unterstützt. Um die verschiedenen unterstützten Sprachen anzuzeigen und das Modell mit der ausgewählten Sprache zu aktualisieren, können wir dies auf diese Weise tun.

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

Unser Modell site.lang Erhält einen language -Wert, wenn der Ausdruck unter Bewertung (site.lang == language) Wahr ist. Auf diese Weise können Sie es einfach mit dem Server synchronisieren, da die Änderung bereits in Ihrem Modell vorhanden ist.

23
kitimenpolku

Wurde nur mit dem eingebauten angular Attribut ng-checked="model"

21
Christopher Marshall

Wie bereits in den Fragenkommentaren erläutert, können Sie dies auf folgende Weise tun:

  • Wenn Sie die Daten zum ersten Mal abrufen, durchlaufen Sie alle Speicherorte und legen storeDefault auf den Speicher fest, der derzeit der Standardspeicher ist.
  • Im Markup: <input ... ng-model="$parent.storeDefault" value="{{location.id}}">
  • Bevor Sie die Daten speichern, durchlaufen Sie alle merchant.storeLocations und setzen isDefault auf false, mit Ausnahme des Stores, in dem location.id mit storeDefault verglichen wird.

Das Obige nimmt an, dass jeder Ort ein Feld (z. B. id) hat, das einen eindeutigen Wert enthält.

Beachten Sie, dass $ parent.storeDefault verwendet wird, weil ng-repeat einen untergeordneten Bereich erstellt und wir den storeDefault-Parameter im übergeordneten Bereich bearbeiten möchten.

Geige .

2
Mark Rajcok

Mach einfach so etwas, <input type="radio" ng-disabled="loading" name="dateRange" ng-model="filter.DateRange" value="1" ng-checked="(filter.DateRange == 1)"/>

0
tyne