Javascript AngularJs：如何设置基于模型检查的单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14530785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJs: How to set radio button checked based on model
提问by Christopher Marshall
I have a model returning in the storeLocations object with a isDefault value. if isDefault returns true, I wan't to set that radio button in the group as checked.
我在 storeLocations 对象中返回一个具有 isDefault 值的模型。如果 isDefault 返回 true，我不想将组中的单选按钮设置为选中状态。
Not sure if I need to do a $each(data, function(index,value) and iterate through each object returned or if there's an easier way to do this using angular constructs.
不确定我是否需要执行 $each(data, function(index,value) 并遍历返回的每个对象，或者是否有更简单的方法使用角度构造来执行此操作。
Object:
目的：
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>
回答by ivan.a.bovin
Use ng-valueinstead of value.
使用ng-value代替value。
ng-value="true"
Version with ng-checkedis worse because of the code duplication.
ng-checked由于代码重复，版本更糟。
回答by Rubi saini
If you have a group of radio button and you want to set radio button checked based on model, then radio button which has same valueand ng-model, is checked automatically.
如果您有一组单选按钮，并且您想根据型号设置选中的单选按钮，则会自动选中具有相同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">
If the value of myRatingis "2" then second radio button is selected.
如果 的值为myRating“2”，则选择第二个单选按钮。
回答by kitimenpolku
One way that I see more powerful and avoid having a isDefaultin all the models is by using the ng-attributes ng-model, ng-valueand ng-checked.
一种方式，我看到更多强大及避免isDefault在所有的车型是使用毫微克的属性ng-model，ng-value和ng-checked。
ng-model: binds the value to your model.
ng-model：将值绑定到您的模型。
ng-value: the value to pass to the ng-modelbinding.
ng-value：传递给ng-model绑定的值。
ng-checked: value or expression that is evaluated. Useful for radio-button and check-boxes.
ng-checked: 被评估的值或表达式。对单选按钮和复选框有用。
Example of use:In the following example, I have my model and a list of languages that my site supports. To display the different languages supported and updating the model with the selecting language we can do it in this way.
使用示例：在以下示例中，我有我的模型和我的站点支持的语言列表。要显示支持的不同语言并使用选择语言更新模型，我们可以通过这种方式进行。
<!-- 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 -->
Our model site.langwill get a languagevalue whenever the expression under evaluation (site.lang == language)is true. This will allow you to sync it with server easily since your model already has the change.
只要被评估的表达式为真，我们的模型site.lang就会得到一个language值(site.lang == language)。这将允许您轻松地将其与服务器同步，因为您的模型已经发生了变化。
回答by Christopher Marshall
Ended up just using the built-in angular attribute ng-checked="model"
最终只使用了内置的 angular 属性 ng-checked="model"
回答by Mark Rajcok
As discussed somewhat in the question comments, this is one way you could do it:
正如问题评论中所讨论的那样，这是您可以做到的一种方式：
- When you first retrieve the data, loop through all locations and set storeDefault to the store that is currently the default.
- In the markup:
<input ... ng-model="$parent.storeDefault" value="{{location.id}}"> - Before you save the data, loop through all the merchant.storeLocations and set isDefault to false except for the store where location.id compares equal to storeDefault.
- 当您第一次检索数据时，遍历所有位置并将 storeDefault 设置为当前默认的商店。
- 在标记中：
<input ... ng-model="$parent.storeDefault" value="{{location.id}}"> - 在保存数据之前，循环遍历所有的 Merchant.storeLocations 并将 isDefault 设置为 false，除了 location.id 比较等于 storeDefault 的商店。
The above assumes that each location has a field (e.g., id) that holds a unique value.
以上假设每个位置都有一个字段（例如，id）保存唯一值。
Note that $parent.storeDefault is used because ng-repeat creates a child scope, and we want to manipulate the storeDefault parameter on the parent scope.
请注意，使用 $parent.storeDefault 是因为 ng-repeat 创建了一个子作用域，而我们想要在父作用域上操作 storeDefault 参数。
小提琴。
回答by tyne
Just do something like this,<input type="radio" ng-disabled="loading" name="dateRange" ng-model="filter.DateRange" value="1" ng-checked="(filter.DateRange == 1)"/>
做这样的事情，<input type="radio" ng-disabled="loading" name="dateRange" ng-model="filter.DateRange" value="1" ng-checked="(filter.DateRange == 1)"/>
