Question

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

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下的表达式为true，我们的模型language就会获得(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参数。

Fiddle

Answer 6

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

AngularJs：如何根据模型设置单选按钮

6 个答案: