AngularJs：如何设置基于模型检查的单选按钮

Posted 2023-02-26

【中文标题】AngularJs：如何设置基于模型检查的单选按钮

【英文标题】：AngularJs: How to set radio button checked based on model

【发布时间】：2013-01-09 22:43:31

【问题描述】：

我在 storeLocations 对象中返回了一个带有 isDefault 值的模型。如果 isDefault 返回 true，我不想将组中的单选按钮设置为选中。

不确定我是否需要执行 $each(data, function(index,value) 并遍历返回的每个对象，或者是否有更简单的方法可以使用角度构造来执行此操作。

对象：

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>

【问题讨论】：

您是否需要在每个商店位置对象上使用 isDefault？似乎从每个对象中删除该属性并只有一个 storeDefault 属性可能更容易。然后 。这当然假设/要求每个位置都有一个包含唯一值的字段（例如 id）。

我更喜欢您提出的数据结构，但在返回 storeLocation 对象时，我仍然需要将默认存储显示为选中状态。

@joragupra 考虑到这个问题是在 2013 年提出的，如果有的话，您的链接答案应该被标记为重复。

【参考方案1】：

使用ng-value 代替value。

ng-value="true"

ng-checked 的版本更差，因为代码重复。

【讨论】：

这是最近发布的吗？我认为这在我当时使用的版本中不可用。

我使用 AngularJS v1.1.5。

这是正确答案。使用 'ng-value' 和 'ng-model' 正确勾选/取消勾选按钮并保持双向绑定。

@DhafirNz 刚刚又用了这个，改成正确答案了。

对我不起作用.. 而ng-checked 起作用了

【参考方案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”，则选择第二个单选按钮。

【讨论】：

模型为空时如何设置第一个选中的？我尝试了 ng-checked 和 ng-init 但不起作用。有什么想法吗？

嗨，你为什么不在控制器加载或 ng-init 方法中设置模型的默认值？如果您在控制器负载上设置模型的默认值，例如“myRating” = 1，那么第一个单选按钮将显示为选中状态。

什么版本的 Angular？至少在 1.2 中，ng-model 结合“值”不会在页面加载时将其中一个单选按钮设置为选中状态。只有在您选择一个之后，双向绑定才开始起作用。编辑：实际上，它适用于数字，但如果值是字符串则不行。

你拯救了我的一天！完美的解决方案！

@tandrewnichols 我遇到了一个问题，即在页面加载时最初没有选择单选按钮（即使我可以看到该单选按钮的 ng-model 和 ng-value 相同）并且它事实证明，其中一个值是一个数字，一个是一个字符串，所以 Angular（显然现在使用 === 不幸的是）确定它们不相等。我只是将其中一个值包装在 Number() 中，我从中得到它，一切都很好。而且我看到了一个 plunkr （对不起，丢失了 url），它也显示了它与字符串一起工作。哦，也用'ng-value'代替'value'！

【参考方案3】：

我认为更强大并避免在所有模型中使用 isDefault 的一种方法是使用 ng 属性 ng-model、@ 987654323@ 和 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) 为真，我们的模型site.lang 就会得到language 值。这将允许您轻松地将其与服务器同步，因为您的模型已经进行了更改。

【参考方案4】：

最终只使用了内置的角度属性ng-checked="model"

【讨论】：

嗯，这很奇怪。添加checked="checked" 不起作用，但ng-checked="true" 起作用，它唯一的作用是将checked="checked" 添加到单选按钮。

我当时的模型是一个布尔值，所以它对我有用：\

@Kremchik 这是由于 Angular 消化循环。它首先在 html 解析期间搜索指令，然后在 DOM 上分配事件侦听器并在模型上分配 $watch-es 后，它编译所有内容，这还涉及在您的 html 标记上生成属性。这就是为什么如果你使用 [code]checked="checked"[/code] Angular 会简单地覆盖它，因为正如 Angular 团队所说：“Angular 喜欢控制你的 DOM”。希望它能解释一些行为

【参考方案5】：

正如问题 cmets 中所讨论的，这是您可以做到的一种方法：

当您第一次检索数据时，遍历所有位置并将 storeDefault 设置为当前默认的存储。 在标记中：<input ... ng-model="$parent.storeDefault" value="location.id"> 在保存数据之前，请遍历所有的 Mercer.storeLocations 并将 isDefault 设置为 false，但 location.id 比较等于 storeDefault 的商店除外。

以上假设每个位置都有一个包含唯一值的字段（例如，id）。

请注意，使用 $parent.storeDefault 是因为 ng-repeat 创建了一个子作用域，而我们想要在父作用域上操作 storeDefault 参数。

Fiddle.

【参考方案6】：

就这样吧，<input type="radio" ng-disabled="loading" name="dateRange" ng-model="filter.DateRange" value="1" ng-checked="(filter.DateRange == 1)"/>