使用angularjs處理JSON數據

Question

我試圖根據json響應顯示問題。這裏是我的代碼片段：

function BackgroundInfoController($scope, $http, $location, profileInfo) { 
    $scope.master = {}; 
    $scope.questions = {}; 
    $scope.backgroundInfo = profileInfo.backgroundInfo; 
    $http.get("/ERegII-1.0/public/test/", { cache: true }) 
    .success(function(data) { 
     /*alert(JSON.stringify(data));*/ 
    $scope.questions = data; 
    }).error(function(data) { 
     alert("fail:" + JSON.stringify(data)); 
     // TODO display error messages. 
    }); 

現在我嘗試使用角度控制器，這樣的事情在頁面上顯示的數據：

<div data-ng-controller="BackgroundInfoController"> 
    <ol> 
    <li data-ng-repeat="question in questions"> {{question.displayText}}<br> 
    {{question.responseType}} 
    </li> 
    <div reponse-type="question.responseType" ref-data="question.demographicResponses"> 

    </div> 
</ol> 

    </div> 

，我得到JSON數據是以下格式：

[ 
    { 
      "seqNo":0, 
      "qstnNo":34, 
      "responseType":"F", 
      "responseRequired":false, 
      "displayText":"If you have been provided with a state ID enter it here", 
      "demographicResponses":[ 

      ], 
      "dependentQuestionVO":[ 

      ], 
      "selectedResponseIds":[ 

      ], 
      "freeFormAnswer":null, 
      "response":"", 
      "independent":true, 
      "answered":false, 
      "triggered":false 
     }, 
     { 
      "seqNo":2, 
      "qstnNo":2, 
      "responseType":"R", 
      "responseRequired":true, 
      "displayText":"What is your ethnicity?", 
      "demographicResponses":[ 
      { 
       "possibleResponse":"Non-Hispanic", 
       "seqNo":2, 
       "respNo":201 
      }, 
      { 
       "possibleResponse":"Hispanic", 
       "seqNo":2, 
       "respNo":202 
      }, 
      { 
       "possibleResponse":"I prefer not to respond", 
       "seqNo":2, 
       "respNo":203 
      } 
    ] 

"dependentQuestionVO":[ 
     { 
      "dependentQstnNo":3, 
      "triggerRespNo":202, 
      "triggerArrayElement":"[202,3]" 
     } 
     ], 
     "selectedResponseIds":[ 
     "201", 
     "202", 
     "203" 
     ], 
     "freeFormAnswer":null, 
     "response":"Non-Hispanic 
Hispanic 
I prefer not to respond 
", 
     "independent":false, 
     "answered":true, 
     "triggered":true 
    }, 
    { 
     "seqNo":3, 
     "qstnNo":3, 
     "responseType":"R", 
     "responseRequired":true, 
     "displayText":"What is your Hispanic origin?", 
     "demographicResponses":[ 
     { 
      "possibleResponse":"Mexican, Mexican, or Chicano", 
      "seqNo":3, 
      "respNo":301 
     }, 
     { 
      "possibleResponse":"Puerto Rican or Puerto Rican American", 
      "seqNo":3, 
      "respNo":302 
     }, 
     { 
      "possibleResponse":"Cuban or Cuban American", 
      "seqNo":3, 
      "respNo":303 
     }, 
     { 
      "possibleResponse":"Other", 
      "seqNo":3, 
      "respNo":304 
     } 
     ], 
     "dependentQuestionVO":[ 

     ], 
     "selectedResponseIds":[ 
     "301", 
     "302", 
     "303", 
     "304" 
     ], 
     "freeFormAnswer":null, 
     "response":"Mexican, Mexican, or Chicano 
Puerto Rican or Puerto Rican American 
Cuban or Cuban American 
Other 
", 
     "independent":true, 
     "answered":true, 
     "triggered":false 
    }, 
    { 
     "seqNo":4, 
     "qstnNo":4, 
     "responseType":"M", 
     "responseRequired":true, 
     "displayText":"What is your race? Select all that apply.", 
     "demographicResponses":[ 
     { 
      "possibleResponse":"American Indian or Alaskan Native", 
      "seqNo":4, 
      "respNo":401 
     }, 
     { 
      "possibleResponse":"Asian", 
      "seqNo":4, 
      "respNo":402 
     }, 
     { 
      "possibleResponse":"Black or African American", 
      "seqNo":4, 
      "respNo":403 
     }, 
     { 
      "possibleResponse":"Native Hawaiian or Other Pacific Islander", 
      "seqNo":4, 
      "respNo":404 
     }, 
     { 
      "possibleResponse":"White", 
      "seqNo":4, 
      "respNo":405 
     }, 
     { 
      "possibleResponse":"Other", 
      "seqNo":4, 
      "respNo":406 
     }, 
     { 
      "possibleResponse":"I prefer not to respond", 
      "seqNo":4, 
      "respNo":407 
     } 
     ], 
     "dependentQuestionVO":[ 

     ], 
     "selectedResponseIds":[ 
     "401", 
     "402", 
     "403", 
     "404", 
     "405", 
     "406", 
     "407" 
     ], 
     "freeFormAnswer":null, 
     "response":"American Indian or Alaskan Native 
Asian 
Black or African American 
Native Hawaiian or Other Pacific Islander 
White 
Other 
I prefer not to respond 
", 
     "independent":true, 
     "answered":true, 
     "triggered":false 
    }, 
    { 
     "seqNo":5, 
     "qstnNo":5, 
     "responseType":"R", 
     "responseRequired":true, 
     "displayText":"Do you communicate better (or as well) in English than in any other language?", 
     "demographicResponses":[ 
     { 
      "possibleResponse":"Yes", 
      "seqNo":5, 
      "respNo":501 
     }, 
     { 
      "possibleResponse":"No", 
      "seqNo":5, 
      "respNo":502 
     } 
     ], 
     "dependentQuestionVO":[ 

     ], 
     "selectedResponseIds":[ 
     "501", 
     "502" 
     ], 
     "freeFormAnswer":null, 
     "response":"Yes 
No 
", 
     "independent":true, 
     "answered":true, 
     "triggered":false 
    }, 
    { 
     "seqNo":6, 
     "qstnNo":6, 
     "responseType":"R", 
     "responseRequired":false, 
     "displayText":"Which of the following best describes your current employment status?", 
     "demographicResponses":[ 
     { 
      "possibleResponse":"Employed part-time (29 or fewer hours per week)", 
      "seqNo":6, 
      "respNo":601 
     }, 
     { 
      "possibleResponse":"Employed full-time", 
      "seqNo":6, 
      "respNo":602 
     }, 
     { 
      "possibleResponse":"Unemployed (seeking employment)", 
      "seqNo":6, 
      "respNo":603 
     }, 
     { 
      "possibleResponse":"Not in the labor force (homemaker, family caregiver, student, retired)", 
      "seqNo":6, 
      "respNo":604 
     } 
     ], 
     "dependentQuestionVO":[ 

     ], 
     "selectedResponseIds":[ 
     "601", 
     "602", 
     "603", 
     "604" 
     ], 
     "freeFormAnswer":null, 
     "response":"Employed part-time (29 or fewer hours per week) 
Employed full-time 
Unemployed (seeking employment) 
Not in the labor force (homemaker, family caregiver, student, retired) 
", 
     "independent":true, 
     "answered":true, 
     "triggered":false 
    }, 
    { 
     "seqNo":7, 
     "qstnNo":7, 
     "responseType":"S", 
     "responseRequired":false, 
     "displayText":"What was the last grade of school that you completed?", 
     "demographicResponses":[ 
     { 
      "possibleResponse":"5th grade or lower", 
      "seqNo":7, 
      "respNo":701 
     }, 
     { 
      "possibleResponse":"6th grade", 
      "seqNo":7, 
      "respNo":702 
     }, 
     { 
      "possibleResponse":"7th grade", 
      "seqNo":7, 
      "respNo":703 
     }, 
     { 
      "possibleResponse":"8th grade", 
      "seqNo":7, 
      "respNo":704 
     }, 
     { 
      "possibleResponse":"9th grade (high school freshman)", 
      "seqNo":7, 
      "respNo":705 
     }, 
     { 
      "possibleResponse":"10th grade (high school sophomore)", 
      "seqNo":7, 
      "respNo":706 
     }, 
     { 
      "possibleResponse":"11th grade (high school junior)", 
      "seqNo":7, 
      "respNo":707 
     }, 
     { 
      "possibleResponse":"12th grade (high school senior)", 
      "seqNo":7, 
      "respNo":708 
     } 
     ], 

有些問題是基於一個問題的具體答案。有人可以幫助我在agyularjs中顯示這些問題的答案嗎？ F =自由格式文本，M =多選形式（複選框），R =單選按鈕。

Answer 1

這可能不是你想要的，但它應該提供一個可能的起點。

<div ng-app="myapp"> 
    <ol ng-controller="ctrl"> 
     <li data-ng-repeat="question in questions"> 
      <div ng-switch on="question.responseType"> 
      <div ng-switch-when="F" textquestion="question"></div> 
      <div ng-switch-when="R" radioquestion="question"></div> 
      <div ng-switch-when="M" multiquestion="question"></div> 
      <div ng-switch-when="S" selectquestion="question"></div> 
      </div> 
     </li> 
    </ol> 
</div> 

在這些指令的模板是有點長，所以它可能會更好過拆分其作爲獨立的模板，並使用templateUrl得到它們。 （如果你永遠不會重複使用它們，你可以只需要插入模板在html以上。）

app.directive("textquestion", function(){ 
    return { 
     restrict: 'A', 
     template : '<label>{{question.displayText}}<br/><input name="{{question.qstnNo}}" type="text"/></label>', 
     scope : { question: '=textquestion' } 
    }; 
}) 
.directive("radioquestion", function(){ 
    return { 
     restrict: 'A', 
     template : '{{question.displayText}}<br/><label ng-repeat="resp in question.demographicResponses"><input name="{{question.qstnNo}}" type="radio" value="{{resp.respNo}}" /> {{resp.possibleResponse}} </label> ', 
     scope : { question: '=radioquestion' } 
    }; 
}) 
.directive("multiquestion", function(){ 
    return { 
     restrict: 'A', 
     template : '{{question.displayText}}<br/><label ng-repeat="resp in question.demographicResponses"><input name="{{question.qstnNo}}" type="checkbox" value="{{resp.respNo}}" /> {{resp.possibleResponse}} </label>', 
     scope : { question: '=multiquestion' } 
    }; 
}) 
.directive("selectquestion", function(){ 
    return { 
     restrict: 'A', 
     template : '{{question.displayText}}<br/><label> <select name="{{question.qstnNo}}"><option ng-repeat="resp in question.demographicResponses" value="{{resp.respNo}}"> {{resp.possibleResponse}}</option></select></label>', 
     scope : { question: '=selectquestion' } 
    }; 
}) 

http://jsfiddle.net/gwt3Q/

Answer 2

謝謝TOWR！我想它是一個操縱JSON的好方法。但是，我使用了不同的方法。

這裏是我的方法，工作正常，截至目前:)

<li ng-repeat="question in questions"><strong>{{question.displayText}}</strong><br> 
     <input type="text" ng-show="question.responseType == 'F'" name="questions.seqNo" ng-model="answers[question.seqNo]" /> 

     <span ng-show="question.responseType == 'R'" data-ng-repeat=" demoResponse in question.demographicResponses"> 
     <input type="radio" ng-show="question.responseType == 'R'" name="{{questions.seqNo}}" ng-model="answers[question.seqNo]" value="{{ demoResponse.respNo }}" /> {{demoResponse.possibleResponse}} <br> 
     </span> 
     <span ng-show="question.responseType == 'M'" data-ng-repeat=" demoResponse in question.demographicResponses"> 
     <input type="checkbox" ng-show="question.responseType == 'M'" name="M" ng-checked="answers[question.seqNo].indexOf(demoResponse.respNo) > -1" ng-click="toggleSelection(question.seqNo, demoResponse.respNo)" /> {{demoResponse.possibleResponse}} <br> 
     </span> 

     <span ng-show="question.responseType == 'S'"> 
      <select data-ng-model="answers[question.seqNo]" > 
       <option ng-repeat="demoResponse in question.demographicResponses" value="{{demoResponse.respNo}}">{{demoResponse.possibleResponse}}</option> 
      </select> 
     </span> 

    </li> 

我的腳本代碼是在這裏。我還將數據綁定到示波器上：

function BackgroundInfoController($scope, $http, $location, profileInfo) { 
    $scope.master = {}; 
    $scope.questions = {}; 
    $scope.answers = {}; 
    $scope.backgroundInfo = profileInfo.backgroundInfo; 
    $http.get("/ERegII-1.0/public/test/", { cache: true }) 
    .success(function(data) { 
    /* alert(JSON.stringify(data));*/ 
     $scope.questions = data; 
     }).error(function(data) { 
     alert("fail:" + JSON.stringify(data)); 
     // TODO display error messages. 
    }); 


    $scope.toggleSelection = function toggleSelection(seqNo, option) { 
     if ($scope.answers[seqNo] == null) { 
      $scope.answers[seqNo] = []; 
     } 
     var index = $scope.answers[seqNo].indexOf(option); 
     if (index > -1) { 
      $scope.answers[seqNo].splice(index, 1); 
     } else { 
      $scope.answers[seqNo].push(option); 
     } 
    // alert($scope.answers[seqNo]); 
    };