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个questionField字段而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

由于你没有提供足够的细节，例如控制器，函数等，所以很难断言，但我会给你一条路径来创建你的json对象。

在你的表单元素中，你设置了'ng-click = submit（）'，相反，我会有'ng-submit = ctrl.generateObject'。
在您的控制器中，添加一个空对象，以便在此处添加您的答案，例如：'$ scope.answers = {};'或'this.answers = {};'。

在你的控制器中创建一个函数，我在第一项中提到的那个：

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

再一次，很难理解你的情景，试着按照这一行，也许你自己的功能。

如果您正在使用Chrome，请下载 Angular Batarang Extension ，并使用浏览器开发工具导航至 AngularJS 标签，以便您那里会看到你所有的模特，应用程序和控制器。

Answer 2

您好我为您提供了一个简化的解决方案片段（我没有考虑到不同的护理），我只翻译了问题的名称，但您可以轻松地将此解决方案扩展到翻译你想要的任何东西。

＆＃13;

var 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"
			    }
			]
		}
	]
}

angular.module("app", [])
	.controller("MainController", MainController);

function MainController() {
	var vm = this;

    vm.save = save;
    vm.questions = json.questions;
    vm.translatedQuestions = [];
  
    function save() {
    	var questionsClone = [];
    	angular.copy(vm.questions, questionsClone);

    	questionsClone.forEach(function (question, index) {
    		angular.extend(question, vm.translatedQuestions[index]);
    	});

    	console.log(questionsClone);
    }

}

＆＃13;

<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>

＆＃13;

不同的数据绑定方式

2 个答案: