对于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对象，从

 { "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

来源

2016-03-02 Rk R Bairi

您必须为数组 –

定义单选按钮的data-ng-model，请添加myService.codeDetail json对象。 –

已更新@hadiJZ。 –

您需要使用$指数：

然后，打开数据-NG-型号为true或false值的数组，通过索引到的数据等-NG-模型这样的：

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

来源

2016-03-02 05:54:51 maxwell

感谢您的回答，我会试试这个，这似乎解决了绑定问题。接下来，我需要找到一种方法来查看所有行被标记为是/否。检查每一行是“必需的”，否则在我的表单中提交将被禁用。如果需要，我会寻求你的帮助，谢谢。 –

@Rk Reddy Bairi因为你正在初始化数组'null'，如果你是我的例子，那么你可以检查表单提交如果数组中的任何值=== null（做一个for循环或model.isChecked.forEach方法）返回一个框，告诉用户确保他们完成表单。 – maxwell

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

使用财产以后这样的：数据-NG-模型= “模型[ '器isChecked' _ {{$索引}}]”

有像

$scope.someVariable =['radio1','radio2' ....]

阵列

并使用它是这样的：

数据-NG-模型= “someVariable [$指数]”

来源

2016-03-02 05:47:40

你能帮助我知道如何做到动态？ –

使用类似这样的东西：data-ng-model =“model ['isChecked'_ {{$ index}}]” –

@ p2。当用户选择一个单选按钮的例子时，no选择单选按钮。 –

你必须有类似这种

我添加到您的JSON Field对象的显示，我认为，如果你要跟使用复选框，这里是更好的代码。

"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)" 
>

来源

2016-03-02 05:51:27

它是如此简单，这是因为你的数据-NG-模式是相同的所有。

所以只需要修改它通过下面的代码：

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

试试这个，它会工作。

来源

2016-03-02 06:02:45

对于ng-repeat的所有行自动选择单选按钮

回答

相关问题