AngularJs：如何根據模型設置單選按鈕

Question

我有一個模型在storeLocations對象中返回一個isDefault值。 如果isDefault返回true，我不想將組中的單選按鈕設置為已選中。

不確定我是否需要執行$ each（數據，函數（索引，值）並迭代返回的每個對象，或者是否有更簡單的方法使用角度構造執行此操作。

賓語：

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>

Answer 1

使用ng-value而不是value 。

ng-value="true"

由於代碼重復，使用ng-checked版本更糟糕。

Answer 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”，則選擇第二個單選按鈕。

Answer 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)為true，我們的模型site.lang就會獲得一個language值。 這樣您就可以輕松地將其與服務器同步，因為您的模型已經有了更改。

Answer 4

僅使用內置的角度屬性ng-checked="model"

Answer 5

正如問題評論中所討論的那樣，這是你可以做到的一種方式：

• 首次檢索數據時，循環遍歷所有位置並將storeDefault設置為當前默認的存儲。
• 在標記中： <input ... ng-model="$parent.storeDefault" value="{{location.id}}">
• 在保存數據之前，循環遍歷所有merchant.storeLocations並將isDefault設置為false，但location.id比較等於storeDefault的商店除外。

以上假設每個位置具有保持唯一值的字段（例如，id）。

請注意，使用$ parent.storeDefault是因為ng-repeat創建了子作用域，我們希望在父作用域上操作storeDefault參數。

小提琴 。

Answer 6

只需做這樣的事情， <input type="radio" ng-disabled="loading" name="dateRange" ng-model="filter.DateRange" value="1" ng-checked="(filter.DateRange == 1)"/>