为所有ng-repeat行自动选择单选按钮

时间:2016-03-02 05:44:42

标签: angularjs radio-button angularjs-ng-repeat ng-repeat

我有一个条件列表,用户必须为每个条件单击是或否。使用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 Object用于从

中提取代码,描述
     { "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

enter image description here

4 个答案:

答案 0 :(得分:4)

您需要使用 $ 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中创建的人物对象。您可以将此人的答案存储为此“人”对象的属性

data-ng-model =“person.answer”或类似/更具语义的东西。

还有一点需要注意,你可以看看有关单选按钮的angular的文档,似乎你可以使它们更符合angular的首选实现。

https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

答案 1 :(得分:3)

这是因为你的 data-ng-model =“model.isChecked”对于ng-repeat中的所有无线电输入都是相同的。

使用以下内容: data-ng-model =“model ['isChecked'_ {{$ index}}]”

OR

有一个像

这样的数组
$scope.someVariable =['radio1','radio2' ....]

并像这样使用它:

  

data-ng-model =“someVariable [$ index]”

答案 2 :(得分:1)

你必须有类似的代码

我在你的json对象中添加了一个显示的字段,我认为如果你在这里使用复选框更好。

inside of loop
{'distance': 2453, 'ports': ['SCL', 'LIM']}
0
inside of loop
{'distance': 1879, 'ports': ['LIM', 'BOG']}
1
Left for loop
[{'distance': 4231, 'ports': ['LIM', 'MEX']}, {'distance': 2499, 'ports':     ['MEX', 'LAX']}, {'distance': 2714,

然后在你的html视图中你可以定义单选按钮模型。

 "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"}
   ]
 } 
}

答案 3 :(得分:1)

这很简单,因为你的数据ng模型对所有人都是一样的。

所以只需通过以下代码修改它:

<input type="radio"
       name="radio{{$index}}"
       id=""
       data-ng-model="model.isChecked[$index]"
       ng-value="false"
       ng-click="myService.updateList(person.code)"                  
       >

试试这个,它会起作用。