AngularJS动态表单无效

我在AngularJS中有一个动态表单，输入标签会根据用户选择的问题类型进行替换。所以问题是，当用户留下需要输入标签的空白并切换到其他类型的问题时，表单仍然无效（即使当前表单有效）。AngularJS动态表单无效

我为它添加了JsFiddle，你会明白。

HTML

<body ng-app="myApp" ng-controller="myCtrl"> 
<form name="myForm" novalidate> 
    <div><input name='name' type='text' ng-model='name' ng-required='true' placeholder='name'></div> 
    <div compile="myHtml"></div> 
<input type="radio" ng-required='true' ng-click="addQuestion(1)" ng-model="radio" value="1"> Question 1 &amp; 3 
<input type="radio" ng-required='true' ng-click="addQuestion(2)" ng-model="radio" value="2"> Question 2 &amp; 4 
<input type="submit" name="submit" ng-click="" ng-disabled="myForm.$invalid"> 
</form>  
</body>

的Javascript

// the main (app) module 
var myApp = angular.module("myApp", []); 

// add a controller 
myApp.controller("myCtrl", function($scope) { 
$scope.name = "John Doe"; 
$scope.myHtml = ""; 
$scope.radio="1"; 
$scope.question1 = 1; 
$scope.question2 = 2; 
$scope.question4 = 4; 

$scope.addQuestion = function(id) { 
    $scope.myHtml = ""; 
    if(id == 1) { 
     $scope.myHtml += "<div><input name='question1' type='text' ng-model='question1' ng-required='true' placeholder='Question 1'></div>"; 
     $scope.myHtml += "<div><input name='question3' type='text' ng-model='question3' ng-required='true' placeholder='Question 3'></div>"; 
    };  
    if(id == 2) { 
     $scope.myHtml += "<div><input name='question2' type='text' ng-model='question2' ng-required='true' placeholder='Question 2'></div>"; 
     $scope.myHtml += "<div><input name='question4' type='text' ng-model='question4' ng-required='true' placeholder='Question 4'></div>"; 
    }; 
};  
$scope.addQuestion(1); 
}); 

// add a directive 
myApp.directive('compile', ['$compile', function ($compile) { 
return function(scope, element, attrs) { 
    scope.$watch(
     function(scope) { 
      // watch the 'compile' expression for changes 
      return scope.$eval(attrs.compile); 
     }, 
     function(value) { 
      // when the 'compile' expression changes 
      // assign it into the current DOM 
      element.html(value); 

      // compile the new DOM and link it to the current 
      // scope. 
      // NOTE: we only compile .childNodes so that 
      // we don't get into infinite loop compiling ourselves 
      $compile(element.contents())(scope); 
     } 
    ); 
}; 
}]);

服务器JSON的问题

$scope.fields = [{ 
    "caption": "Gender", 
     "questionType": "RADIO", 
     "optionValues": ["Male", "Female"], 
     "fieldPriority": "REQUIRED" 
}, { 
    "caption": "City", 
     "questionType": "TEXT", 
     "optionValues": "", 
     "fieldPriority": "REQUIRED" 
}, { 
    "caption": "Address", 
     "questionType": "PARAGRAPH_TEXT", 
     "optionValues": "", 
     "fieldPriority": "REQUIRED" 
}, { 
    "caption": "Nationality", 
     "questionType": "LIST", 
     "optionValues": ["Indian", "American"], 
     "fieldPriority": "REQUIRED" 
}, { 
    "caption": "Tea/Coffee", 
     "questionType": "CHECKBOX", 
     "optionValues": ["Tea", "Coffee"], 
     "fieldPriority": "REQUIRED" 
}];

感谢

来源

2015-06-20 Mr Roshan Pawar

不要在控制器中存储平面html。只需使用ng-if或ng-show来处理你的逻辑。

来源

2015-06-20 06:40:15 Ashot

感谢您的回答，我知道这是可以做到这样，但我有更复杂的形式。我只是用简单的形式重新创建了我的问题，只是为了给出这个想法。我不能使用ng-if或ng-show。 –

我会重构你的代码来使用ng-include，而不是从控制器编译html，这是在angularjs中完全不好的模式。

你可以注入模板的基础radio价值ng-model

<body ng-app="myApp" ng-controller="myCtrl"> 
    <form name="myForm" novalidate> 
     <div> 
      <input name='name' type='text' ng-model='name' ng-required='true' placeholder='name'/> 
     </div> 
     <div ng-include="'question-set-'+radio +'.html'"></div> 
     <input type="radio" ng-required='true' ng-click="addQuestion(1)" ng-model="radio" value="1" />Question 1 &amp; 3 
     <input type="radio" ng-required='true' ng-click="addQuestion(2)" ng-model="radio" value="2" />Question 2 &amp; 4 
     <input type="submit" name="submit" ng-click="" ng-disabled="myForm.$invalid"> 
    </form> 
</body> 
<script type="text/ng-template" id="question-set-1.html"> 
    <div> <input name = 'question1' type='text' ng-model = 'question1' ng-required = 'true' placeholder = 'Question 1' /> </div> 
    <div><input name='question3' type='text' ng-model='question3' ng-required='true' placeholder='Question 3'/> </div> 
</script> 
<script type="text/ng-template" id="question-set-2.html"> 
    <div><input name ='question2' type ='text' ng-model='question2' ng-required = 'true' placeholder = 'Question 2' /> </div> 
    <div><input name='question4' type='text' ng-model='question4' ng-required='true' placeholder='Question 4'/> </div> 
</script>

Working Fiddle

来源

2015-06-20 06:46:41

我可以在'ng-include'中调用函数吗？ –

@MrSuS为什么不喜欢分离html逻辑？这会更好 –

你有有效的观点。我的问题是，服务器以“JSON”的形式发送问题，我想如何生成动态脚本内容。有什么建议么？ –

AngularJS动态表单无效

回答

相关问题