2016-08-19 116 views
8

我有一個JSON字符串的問題和答案在ng-repeat中綁定, 現在問題是我想在ng-repeat中顯示問題一次和所有多個答案。 這是我的數據。檢查ng-repeat內部的項目是否已經包含值

{Answer:"White",AnswerID:967,answer_type:"RADIO",fullquestion:"Your Race",id:6}{Answer:"African American",AnswerID:968,answer_type:"RADIO",fullquestion:"Your Race",id:6}{Answer:"Asian",AnswerID:969,answer_type:"RADIO",fullquestion:"Your Race",id:6} 

觀點我顯示在

<div ng-repeat="hrq in HrqQuestions"> 
      <div class="list card normal"> 
       <div class="item item-body item-divider">      
        <p ng-bind="hrq.fullquestion"></p>      
       </div> 
       <label class="item item-input" ng-show="hrq.answer_type=='FREETEXT'"> 
        <input ng-model="hrq.Answer" name="name" type="text"> 
       </label> 
       <div ng-if="hrq.answer_type=='RADIO'"> 
        <ion-radio ng-click="selectedAnswer(hrq.AnswerID,hrq.Answer)" name="radio1" ng-value="hrq.AnswerID">{{hrq.Answer}}</ion-radio> 
       </div> 
      </div> 
     </div> 

但這種結合的所有問題與答案多次像

 Q.Your Race 
      White Your Race 
    Q.Your Race 
      African American Your Race 
    Q.Your Race 
      Asian 

,但我需要一個像

 Q. Your Race 
      White Your Race 
      African American Your Race 
      Asian 

我會非常感謝任何人都可以幫助我h該

+0

一個想法是改變HrqQuestions對象到你想要的格式。 – Ruhul

回答

3

試試這個,

  1. 更改'HrqQuestions'作爲陣列
  2. 組您的問題用'身份證'
  3. ,重複的分組問題。與此類似,

angular.module('app',['angular.filter']).controller('MainController', function($scope) { 
 
    $scope.HrqQuestions = [ 
 
     {Answer:"White",AnswerID:967,answer_type:"RADIO",fullquestion:"Your Race",id:6}, 
 
     {Answer:"African American",AnswerID:968,answer_type:"RADIO",fullquestion:"Your Race",id:6}, 
 
     {Answer:"Asian",AnswerID:969,answer_type:"RADIO",fullquestion:"Your Race",id:6} 
 
    ]; 
 
});
<!DOCTYPE html> 
 
<html ng-app="app"> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script> 
 

 
<body ng-controller="MainController"> 
 
    <div ng-repeat="(key, value) in HrqQuestions | groupBy: 'id'"> 
 
    <div><strong>Id:</strong> {{ key }}</div> 
 
    <p ng-repeat="v in value"> 
 
     <strong>Answer {{ $index + 1}}</strong>. {{ v.Answer }} 
 
    </p> 
 
    </div> 
 
</body> 
 
</html>

+0

真棒,非常感謝你這是我一直在尋找:) – Vikas

3

嘗試像this fiddle

<div ng-controller="MyCtrl">  
    <div ng-repeat="hrq in HrqQuestions"> 
      <div class="list card normal"> 
       <div class="item item-body item-divider">      
        <p>{{$index + 1}}. {{hrq.fullquestion}}</p>    
       </div> 
       <div ng-repeat="answer in hrq.answers"> 
        <label class="item item-input" ng-show="answer.answer_type=='FREETEXT'"> 
        <input ng-model="answer.Answer" name="name" type="text"> 
       </label> 
       <div ng-if="answer.answer_type=='RADIO'"> 
        <input type="radio" ng-click="selectedAnswer(answer.AnswerID,answer.Answer)" name="radio1" ng-value="answer.AnswerID">{{answer.Answer}} 
       </div> 
       </div> 
       <br> 
      </div> 
     </div> 
</div> 

控制器代碼

$scope.HrqQuestions = [{ fullquestion: "Your Race", id: 6, 
         answers: [{ Answer: "White", AnswerID: 967, answer_type: "RADIO" }, 
            { Answer: "African American", AnswerID: 968, answer_type: "RADIO" }, 
            { Answer: "Asian", AnswerID: 969, answer_type: "RADIO" }] }, 
         { fullquestion: "My Race", id: 7, 
          answers: [{ Answer: "Black", AnswerID: 967, answer_type: "RADIO" }, 
            { Answer: "African Indian", AnswerID: 968, answer_type: "RADIO" }, 
            { Answer: "India", AnswerID: 969, answer_type: "RADIO" }] }]; 
+0

JSON字符串中存在多個問題,所以我必須在ng-repeat內部使用它來顯示所有問題,我不能單獨顯示它們。 – Vikas

+0

好的,更改我的答案 –

+0

我已經更新了答案,您需要更改JSON結構,將問題和答案保存在一個對象中。看到更新的答案和小提琴 –