web-dev-qa-db-ja.com

AngularJs：モデルに基づいてラジオボタンをオンに設定する方法

IsDefault値でstoreLocationsオブジェクトに返されるモデルがあります。 isDefaultがtrueを返す場合、グループ内のそのラジオボタンをチェック済みとして設定しません。

$ each（data、function（index、value）を実行し、返された各オブジェクトを反復処理する必要があるかどうか、またはangular構造を使用してこれを行う簡単な方法があるかどうかはわかりません。

オブジェクト：

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

valueの代わりにng-valueを使用します。

ng-value="true"

ng-checkedを含むバージョンは、コードが重複しているために悪化します。

67
ivan.a.bovin

ラジオボタンのグループがあり、モデルに基づいてラジオボタンをオンに設定する場合、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」の場合、2番目のラジオボタンが選択されます。

56
Rubi saini

私がより強力だと思う方法の1つは、すべてのモデルでisDefaultを避けることです。ng-attributesng-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は、評価中の式(site.lang == language)が真であるときはいつでもlanguage値を取得します。これにより、モデルにすでに変更が加えられているため、サーバーと簡単に同期できます。

23
kitimenpolku

組み込みのangular属性ng-checked="model"を使用してしまいました

21
Christopher Marshall

質問のコメントでやや議論したように、これはあなたがそれを行うことができる1つの方法です：

  • 最初にデータを取得するとき、すべての場所をループし、storeDefaultを現在デフォルトであるストアに設定します。
  • マークアップ内：<input ... ng-model="$parent.storeDefault" value="{{location.id}}">
  • データを保存する前に、すべてのmerchant.storeLocationsをループ処理し、location.idがstoreDefaultと等しいストアを除いてisDefaultをfalseに設定します。

上記では、各場所に一意の値を保持するフィールド（idなど）があると想定しています。

Ng-repeatが子スコープを作成し、親スコープのstoreDefaultパラメーターを操作するため、$ parent.storeDefaultが使用されることに注意してください。

フィドル 。

2
Mark Rajcok

このようなことをしてください、<input type="radio" ng-disabled="loading" name="dateRange" ng-model="filter.DateRange" value="1" ng-checked="(filter.DateRange == 1)"/>

0
tyne