檢查ng-repeat中多個單選按鈕的值

默認情況下，我在選擇單選按鈕時遇到問題。檢查ng-repeat中多個單選按鈕的值

以下是我的JSON數據

var Result = [{ 
    "Questions": [{ 
     "Question": "question1", 
     "Answer": "Yes" 
    }, 
    { 
     "Question": "question2", 
     "Answer": "No" 
    }, 
    { 
     "Question": "question3", 
     "Answer": null 
    }] 
}, 
{ 
    "Questions": [{ 
     "Question": "question1", 
     "Answer": "Yes" 
    }, 
    { 
     "Question": "question3", 
     "Answer": "No", 
    }, 
    { 
     "Question": "question4", 
     "Answer": null, 
    }] 
}];

有了這個JSON數據，我需要選擇基於答案的單選按鈕。

<div ng-repeat="item in Result"> 
<div class="col-xs-12" ng-repeat="question in item.Questions"> 
    <div class="input-group col-xs-12"> 
     <div>{{question.Question}}</div> 
     <div> 
      <span class="col-xs-4 col-sm-4 no-padding"><input type="radio" ng-model="question.Answer" name="questions_{{$parent.$index}}_{{$index}}" ng-checked='question.Answer == "Yes"' /> <span>Yes</span></span> 
      <span class="col-xs-4 col-sm-4 no-padding"><input type="radio" ng-model="question.Answer" name="questions_{{$parent.$index}}_{{$index}}" ng-checked='question.Answer == "No"' /> <span>No</span></span> 
     </div> 
    </div> 
</div> 
</div>

我無法做到這一點。任何人都可以讓我知道我做錯了什麼嗎？

來源

2017-08-22 user1268130

我認爲你的輸入數據有問題。檢查JSON。改變你的需要。 –

它應該如何工作？ – user1268130

你能否清楚輸出應該如何。所以我也可以幫助 –

1）不要ngModel一起使用ngChecked，從文檔：

請注意，這個指令不應該連同ngModel使用，因爲這可能會導致意外的行爲。

2）您沒有輸入值屬性。您可以將value="Yes"/value="No"屬性添加到相應的輸入，並將它們與ngModel一起使用。剪斷添加工作代碼：

UPDATE

angular.module('app', []) .controller('mainController', function mainController($scope) { $scope.$parent.$index = 1; $scope.Questions = [{ "Question": "question1", "Answer": "Yes" }, { "Question": "question2", "Answer": "No" }, { "Question": "question3", "Answer": null }]; });

 <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script> <body ng-app="app"> <div class="container" ng-controller="mainController"> <div class="alert alert-info"> <div class="col-xs-12" ng-repeat="question in Questions"> <div class="input-group col-xs-12"> <div>{{question.Question}}</div> <div> <span class="col-xs-4 col-sm-4 no-padding"><input type="radio" ng-model="question.Answer" name="questions_{{$parent.$index + '_' + $index}}" value="Yes" /> <span>Yes</span></span> <span class="col-xs-4 col-sm-4 no-padding"><input type="radio" ng-model="question.Answer" name="questions_{{$parent.$index + '_' + $index}}" value="No" /> <span>No</span></span> </div> </div> </div> </div> </div> </body>

來源

2017-08-22 13:48:31

我試過了，但沒有奏效。當我循環json時，最後一個問題的答案將被檢查。剩下的其他問題不會檢查 – user1268130

我認爲問題可能出現在name屬性中。 –

@ user1268130您可以使用'name =「questions _ {{$ parent。$ index +'_'+ $ index}}」''而不是'questions _ {{$ parent。$ index}} _ {{$ index}}' ？ –

你迭代的錯誤，選中此plunker https://plnkr.co/edit/3wgJWFQCckBGNRRYzyjA?p=preview

// Code goes here 
 

 
var app = angular.module('myApp', []); 
 

 
app.controller('mainCtrl', function($scope) { 
 
    $scope.Questions = [{ 
 
    "Questions": [{ 
 
     "Question": "question1", 
 
     "Answer": "Yes" 
 
    }, { 
 
     "Question": "question2", 
 
     "Answer": "No" 
 
    }, { 
 
     "Question": "question3", 
 
     "Answer": null 
 
    }] 
 
    }, { 
 
    "Questions": [{ 
 
     "Question": "question1", 
 
     "Answer": "Yes" 
 
    }, { 
 
     "Question": "question3", 
 
     "Answer": "No", 
 
    }, { 
 
     "Question": "question4", 
 
     "Answer": null, 
 
    }] 
 
    }] 
 
})

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <div class="col-xs-12" ng-repeat="question in Questions"> 
 
    Set-{{$index+1}} 
 
    <br/> 
 
    <div ng-repeat="data in question.Questions"> 
 
     <label> 
 
     <input type="radio" ng-model="data.Answer" value="Yes"> Yes 
 
     </label> 
 
     <label> 
 
     <input type="radio" ng-model="data.Answer" value="No"> No 
 
     </label> 
 
     <label> 
 
     <input type="radio" ng-model="data.Answer" value=null> Null 
 
     </label> 
 
     <br/> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

請勿使用ng-model和ng-checked。使用value或ng-value而不是ng-checked。

選中此項。

來源

2017-08-22 14:13:06

我刪除了名稱屬性，然後它工作正常。謝謝 – user1268130

檢查ng-repeat中多個單選按鈕的值

回答

相關問題