为 ng-repeat 的所有行自动选择单选按钮
Radio buttons getting selected automatically for all the rows of ng-repeat
我有一个条件列表,用户必须为每个条件单击“是”或“否”。使用 ng-repeat 显示所有条件列表和一个包含与该代码相关的 'Yes' 和 'No' 单选按钮的列。 select 是或否的选择与另一行的选择无关。 当我用 'yes' 标记某一行时,所有行都被自动标记为 'yes'。理想的行为是初始单选按钮值默认情况下应该为空,并且应该能够 select 每行的是或否。
有人可以帮忙解决我在这里犯的错误吗?谢谢
<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"}]
}
}
angular 控制器:
$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= "model.isChecked" 对于 ng-repeat 中的所有无线电输入都是相同的。
使用这样的东西:data-ng-model= "model['isChecked'_{{$index}}]"
或
有一个类似
的数组
$scope.someVariable =['radio1','radio2' ....]
并像这样使用它:
data-ng-model= "someVariable[$index]"
你一定有类似这样的代码
我向显示的 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)"
>
你需要使用$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 的首选实现。
这很简单,因为你的 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)"
>
试试这个,它会起作用。
我有一个条件列表,用户必须为每个条件单击“是”或“否”。使用 ng-repeat 显示所有条件列表和一个包含与该代码相关的 'Yes' 和 'No' 单选按钮的列。 select 是或否的选择与另一行的选择无关。 当我用 'yes' 标记某一行时,所有行都被自动标记为 'yes'。理想的行为是初始单选按钮值默认情况下应该为空,并且应该能够 select 每行的是或否。 有人可以帮忙解决我在这里犯的错误吗?谢谢
<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"}]
}
}
angular 控制器:
$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= "model.isChecked" 对于 ng-repeat 中的所有无线电输入都是相同的。
使用这样的东西:data-ng-model= "model['isChecked'_{{$index}}]"
或
有一个类似
的数组$scope.someVariable =['radio1','radio2' ....]
并像这样使用它:
data-ng-model= "someVariable[$index]"
你一定有类似这样的代码
我向显示的 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)"
>
你需要使用$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 的首选实现。
这很简单,因为你的 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)"
>
试试这个,它会起作用。