不同的數據綁定方式

Question

我有一個包含200個問題和答案的json文件。用戶應該閱讀並翻譯它們。 JSON文件的結構是這樣的：

categoryName": "Name of Category", 
"questions": [ 
{ 
    "questionName": "date", 
    "questionField": "dateOfInspection", 
    "questionRequired": "1", 
    "questionType": "datefield", 
    "questionLabel": "Date", 
    "answers": [ 
    { 
     "answerName": "date", 
     "answerType": "datefield" 
    } 
    ] 
}, 
{ 
    "questionName": "dealer", 
    "questionField": "dealer", 
    "questionRequired": "1", 
    "questionType": "textfield", 
    "questionLabel": "Dealer", 
    "answers": [ 
    { 
     "answerName": "dealer", 
     "answerType": "textfield", 
     "answerDescription": "Description Text" 
    } 
    ] 
} 

我在頁面上顯示的所有問題的一種形式：

<form name="questionnaireSubmit" action="" id="q" ng-click="submit()" novalidate> 
      <div ng-repeat="categoryNQuestions in questionnaireFull"> 
       <p id="categoryName" > 
        {{categoryNQuestions.categoryName}} 
       </p> 

       <div ng-repeat="question in categoryNQuestions.questions" id="questionAnswer"> 
        <label id="question"> 
         {{question.questionField}} 
        </label> 
        <input type="text" class="form-control" ng-model="ctrl.qs.questionField" name="{{question.questionField}}" placeholder ="{{question.questionField}}" /> 

        <div ng-show="question.questionDescription"> 
         <label id="description"> 
          {{question.questionDescription}} 
         </label> 
         <input type="text" class="form-control" name="{{question.questionDescription}}" /> 
        </div> 



      <input type="submit" value="Save" id="submit_btn" class="center-block" > 
     </form> 

當用戶按下提交按鈕，我想生成與轉化的問題和答案新的JSON對象。 但是雙向數據綁定在這裏不起作用，因爲我有大約200個問題字段字段，並且ng-model不接受{{questionField}}。

如何以其他方式綁定數據？

我的控制器：

var app = angular.module('questionnaire', []); 
app.controller('myQuestionCtrl', function($scope, $location, $http, $window) { 

    var that=this; 
    //$scope.question; 


$http.get("json_file_url") 
    .then(function(response) { 

    $scope.questionnaireFull = {}; 

    $scope.questionnaireFull = response.data.categories; 



    //create new questionnaire with cleared q_labels, q_descriptions, a_labels and a_descriptions 



    $scope.questionnaireEmptyDuplicate = angular.copy(response.data); 



    for (var i = 0; i < $scope.questionnaireEmptyDuplicate.categories.length; i++){ 
     var caregories = $scope.questionnaireEmptyDuplicate.categories[i]; 

     for (var j = 0; j< caregories.questions.length; j++){ 
      var questions = caregories.questions[j]; 


      if (angular.isUndefinedOrNull(questions.questionLabel) === false) { 
       questions.questionLabel = angular.clearValue(questions.questionLabel); 
      } 

      if (angular.isUndefinedOrNull(questions.questionDescription) === false) { 
       questions.questionDescription = angular.clearValue(questions.questionDescription); 
      } 

      angular.forEach(questions.answers, function(answer_value, answer_key) { 

       if (angular.isUndefinedOrNull(questions.questionDescription) === false) { 
        answer_value.answerLabel = angular.clearValue(answer_value.answerLabel); 
       } 

       if (angular.isUndefinedOrNull(questions.questionDescription) === false) { 
        answer_value.answerDescription = angular.clearValue(answer_value.answerDescription); 
       } 

      }) 


     } 

    } 

    console.log($scope.questionnaireEmptyDuplicate); 



}); /*end of $http.get*/ 




$scope.submit = function() { 
    alert("function is working"); //Add this line to your code to confirm your function is called. 
    $window.location.href = "https://www.google.de/"; 

} 


//functions 
angular.isUndefinedOrNull = function(val) { 
    return angular.isUndefined(val) || val === null 
} 

angular.clearValue = function(val){ 
    val = ''; 
    return val; 
} 

}); 

Answer 1

嗨我用簡化的解決方案爲您製作了一個片段（我沒有考慮到不同的護理），我只是在翻譯問題的名稱，但您可以輕鬆擴展此解決方案以翻譯您的任何內容想。

var json = { 
 
\t "categoryName": "Name of Category", 
 
\t "questions": [ 
 
\t \t { 
 
\t \t \t "questionName": "date", 
 
\t \t \t "questionField": "dateOfInspection", 
 
\t \t \t "questionRequired": "1", 
 
\t \t \t "questionType": "datefield", 
 
\t \t \t "questionLabel": "Date", 
 
\t \t \t "answers": [ 
 
\t \t \t \t  { 
 
\t \t \t \t  "answerName": "date", 
 
\t \t \t \t  "answerType": "datefield" 
 
\t \t \t \t  } 
 
\t \t \t \t ] 
 
\t \t }, { 
 
\t \t \t "questionName": "dealer", 
 
\t \t \t "questionField": "dealer", 
 
\t \t \t "questionRequired": "1", 
 
\t \t \t "questionType": "textfield", 
 
\t \t \t "questionLabel": "Dealer", 
 
\t \t \t "answers": [ 
 
\t \t \t  { 
 
\t \t \t  "answerName": "dealer", 
 
\t \t \t  "answerType": "textfield", 
 
\t \t \t  "answerDescription": "Description Text" 
 
\t \t \t  } 
 
\t \t \t ] 
 
\t \t } 
 
\t ] 
 
} 
 

 
angular.module("app", []) 
 
\t .controller("MainController", MainController); 
 

 
function MainController() { 
 
\t var vm = this; 
 

 
    vm.save = save; 
 
    vm.questions = json.questions; 
 
    vm.translatedQuestions = []; 
 
    
 
    function save() { 
 
    \t var questionsClone = []; 
 
    \t angular.copy(vm.questions, questionsClone); 
 

 
    \t questionsClone.forEach(function (question, index) { 
 
    \t \t angular.extend(question, vm.translatedQuestions[index]); 
 
    \t }); 
 

 
    \t console.log(questionsClone); 
 
    } 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="MainController as main"> 
 
    <form ng-submit="main.save()" novalidate> 
 
    
 
    <div ng-repeat="question in main.questions"> 
 
    <p><b>Name: </b>{{question.questionName}}</p> 
 
    <input type="text" ng-model="main.translatedQuestions[$index].questionName" placeholder="Translate" /> 
 
    </div> 
 

 
    <input type="submit" value="Save" class="center-block" > 
 
    </form> 
 
</div>

Answer 2

很難有主見，因爲你沒有提供足夠的細節，如控制器，功能等，但我會給你創建JSON對象的路徑。

1. 在你的表單元素已設置「NG單擊=提交（）」，相反，我將有一個「NG提交= ctrl.generateObject」。

2. 在你的控制器裏面，添加一個空對象，這樣你的答案就會被添加進來，就像''scope.answers = {};'或'this.answers = {};'。

3. 讓你的控制器內的功能，一個我在第一項提到：

   this.generateObject = function(answers){ 
       this.YourObjectToInsert.push(this.answers); 
   } 
   

再次，這是很難理解的情況下，儘量遵循這一行，也許讓你自己的功能。

如果您使用Chrome下載角Batarang擴展，並使用你的瀏覽器開發工具導航到AngularJS標籤，所以你會看到在那裏所有的模型，應用程序和控制器。