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에서 템플릿을 삽입 할 수 있습니다.) http://jsfiddle.net/gwt3Q/

Answer 2

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' } 
    }; 
}) 

당신에게 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]); 
    };