Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/vim/5.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angularjs 自动为ng repeat的所有行选择单选按钮_Angularjs_Radio Button_Angularjs Ng Repeat_Ng Repeat - Fatal编程技术网

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

Angularjs 自动为ng repeat的所有行选择单选按钮,angularjs,radio-button,angularjs-ng-repeat,ng-repeat,Angularjs,Radio Button,Angularjs Ng Repeat,Ng Repeat,我有一个条件列表,用户必须为每个条件单击“是”或“否”。使用ng repeat显示所有条件列表和一列,其中包含与该代码相关的“是”和“否”单选按钮。选择是或否与选择另一行无关当我用“是”标记某一行时,所有行都会自动标记为“是”。理想的行为是,默认情况下,初始单选按钮值应为空,并且应能够为每行选择“是”或“否”。 有人能帮我纠正一下我在这里犯的错误吗?谢谢 <div ng-repeat= "person in myService.codeDetail"> <div class=

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

角度控制器:

   $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

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

使用类似这样的东西:datangmodel=“model['isChecked'”{{{$index}}]“

有一个类似于

$scope.someVariable =['radio1','radio2' ....]
然后像这样使用它:

数据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

然后,将数据ng模型转换为真值或假值数组,并将索引传递到数据ng模型,如下所示:

data-ng-model = "model.isChecked[$index]"
scope.model.isChecked[$index] = [null, null... for how many questions you have]
然后,您的阵列就可以像这样存在于作用域中:

data-ng-model = "model.isChecked[$index]"
scope.model.isChecked[$index] = [null, null... for how many questions you have]
此外,在最佳实践说明中,您应该利用在ng repeat中创建的person对象。您可以将此人的答案存储为此“person”对象的属性,例如:

数据ng model=“person.answer”或类似/更具语义的内容

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


之所以如此简单,是因为您的数据ng模型对所有人都是一样的

因此,只需通过以下代码对其进行修改:

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


试试这个,它会起作用。

您必须将单选按钮的数据ng模型定义为arrayplease add myService.codeDetail json对象。您能帮我知道如何使其成为动态的吗?使用类似这样的东西:data ng model=“model['isChecked''{{$index}]”@p2。当用户选择单选按钮时,例如“是”,则“否”单选按钮也会为“是”和“否”选择不同的数据ng模型,例如:对于“是”数据ng模型=“模型['isChecked_yes'{{{$index}]”和对于“否”数据ng模型=“模型['isChecked_no'{$index}]”。使用此u将为reach nr repeat和YES/NO单选按钮提供不同的ng数据模型。感谢您的回答,我将尝试此方法-这似乎解决了绑定问题。接下来,我需要找到一种方法来查看所有行是否都标记为是/否。检查每一行是“必需的”,否则我的表单中的提交将被禁用。如果需要,我将寻求您的帮助,谢谢。@Rk Reddy Bairi,因为您正在使用“null”初始化数组。如果您遵循我的示例,那么您可以在提交表单时检查数组中的任何值===null(执行for循环或model.isChecked.forEach方法)是否返回一个框,告诉用户确保他们完成表单。