Question

我在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"
}];

由于

Answer 1

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

Answer 2

我重构您的代码以使用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

AngularJS动态表格无效

2 个答案: