對於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的所有行自動選擇單選按鈕

回答

相關問題