0
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;
}
});
고마워요. 그게 내가 찾고 있던거야. – hasan