为所有 ng-repeat 行自动选择单选按钮
Posted
技术标签:
【中文标题】为所有 ng-repeat 行自动选择单选按钮【英文标题】:Radio buttons getting selected automatically for all the rows of ng-repeat 【发布时间】:2016-06-14 20:15:27 【问题描述】:我有一个条件列表,用户必须为每个条件单击是或否。使用 ng-repeat 显示所有条件列表和一个带有与该代码相关的“是”和“否”单选按钮的列。选择是或否的选择独立于另一行的选择。 当我用“是”标记某一行时,所有行都被自动标记为“是”。理想的行为是默认情况下初始单选按钮值应为空,并且应该能够为每一行选择是或否。 有人可以帮忙解决这里犯的错误吗?谢谢。
<div ng-repeat= "person in myService.codeDetail">
<div class="col-md-2">
<div class="radio">
<input
type="radio"
name= "radio$index"
id=""
data-ng-model= "model.isChecked"
ng-value="true"
ng-click="myService.updateList(patient.code)"
>
<label for="radio$index">Yes</label>
</div>
<div class="radio">
<input
type="radio"
name="radio$index"
id=""
data-ng-model="model.isChecked"
ng-value="false"
ng-click="myService.updateList(person.code)"
>
<label for="radio$index">No</label>
</div>
</div>
用于拉取代码的Json对象,描述来自
"totalCount" : 48, "count" : 3, "offset" : 0, "limit" : 3,
"codeDetail" :
"codeList" : ["Icd" : "250.42", "description" : "type 2", "date": "11/28/2015",
"Icd" : "250.41", "description" : "type 1", "date": "11/27/2015",
"Icd" : "250.40", "description" : "type 0 ", "date": "11/26/2015"]
角度控制器:
$scope.model = ; // model object from service to store data
$scope.myService = myService // binding angular service class to scope
myService.updateList = function() ; // a method in angular service
【问题讨论】:
您必须将单选按钮的 data-ng-model 定义为数组 请添加 myService.codeDetail json 对象。 【参考方案1】:你需要使用$index:
然后,将 data-ng-model 转换为 true 或 false 值的数组,并将索引传递给 data-ng-model,如下所示:
data-ng-model = "model.isChecked[$index]"
然后你的数组可以像这样在范围内:
scope.model.isChecked[$index] = [null, null... for how many questions you have]
此外,根据最佳实践说明,您应该利用您在 ng-repeat 中创建的 person 对象。您可以将该人的答案存储为此“人”对象的属性:
data-ng-model = "person.answer" 或类似/更语义化的东西。
还有一点需要注意,您可以查看 angular 的有关单选按钮的文档,看来您可以使它们更符合 angular 的首选实现。
https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
【讨论】:
感谢您的回答,我会试试这个 - 这似乎解决了绑定问题。接下来我需要找到一种方法来查看所有行都标记为是/否。检查每一行是“必需的”,否则我的表单中的提交将被禁用。如果需要,我会寻求您的帮助,谢谢。 @Rk Reddy Bairi 因为如果您按照我的示例使用“null”初始化数组,那么您可以在表单提交时检查数组中是否有任何值 === null(执行 for 循环或 model.isChecked.forEach 方法)返回一个框,告诉用户确保他们完成表单。【参考方案2】:这是因为您的 data-ng-model="model.isChecked" 对于 ng-repeat 中的所有无线电输入都是相同的。
使用这样的东西:data-ng-model="model['isChecked'_$index]"
或
有一个类似的数组
$scope.someVariable =['radio1','radio2' ....]
并像这样使用它:
data-ng-model="someVariable[$index]"
【讨论】:
你能帮我知道如何让它变得动态吗? 使用这样的东西:data-ng-model="model['isChecked'_$index]" @p2。当用户选择单选按钮示例时,是的,否单选按钮也会选择。 对于 yes 和 no 有不同的 data-ng-model,例如:对于 YES data-ng-model="model['isChecked_yes_'$index]" 和对于 NO data-ng -model=“模型['isChecked_no_'$index]”。使用这个你会有不同的 ng-data-model 到达 nr-repeat 和 YES/NO 单选按钮。【参考方案3】:之所以如此简单,是因为您的 data-ng-model 对所有人都是一样的。
所以只需通过以下代码修改即可:
<input type="radio"
name="radio$index"
id=""
data-ng-model="model.isChecked[$index]"
ng-value="false"
ng-click="myService.updateList(person.code)"
>
试试这个,它会起作用的。
【讨论】:
【参考方案4】:你必须有类似的代码
我向您的显示的 json 对象添加了一个字段,我认为如果您在此处使用复选框会更好。
"codeList" :
[
"Icd" : "250.42", "description" : "type 2", "date": "11/28/2015","check":true OR false,
"Icd" : "250.41", "description" : "type 1", "date": "11/27/2015",
"Icd" : "250.40", "description" : "type 0 ", "date": "11/26/2015"
]
然后在您的 html 视图中,您可以这样定义单选按钮模型。
<input
type="checkbox"
name= "checkBox$index"
id=""
data-ng-model= "person.check"
ng-value="true"
ng-click="myService.updateList(patient.code)"
>
【讨论】:
以上是关于为所有 ng-repeat 行自动选择单选按钮的主要内容,如果未能解决你的问题,请参考以下文章
如何在UnChecked时触发单选按钮的OnChange事件