带有动作按钮ng-click的angularjs中的动态表单生成答案

【问题标题】：Dynamic form Generation in angularjs with action button ng-click带有动作按钮ng-click的angularjs中的动态表单生成
【发布时间】：2015-08-20 09:34:11
【问题描述】：

我需要根据 json 结构动态生成表单字段。（截至目前我已经用作js文件）。我已经成功地生成了网页中的字段。我需要帮助才能将操作项添加到“按钮”部分。

例如：我已经生成了带有验证的文本和按钮字段。但我需要 angularjs 中的按钮单击功能（ng-click 或其他东西）。操作项可能是服务/功能。

var app = angular.module('test_module',[]);
app.controller('DynamicFormController', function ($scope, $log) {
    $scope.entity = {
      name : "Test", 
      fields :
        [
          {type: "text", name: "firstname", label: "Name" , required: true, data:""},
          {type: "text", name: "city", label: "City" , required: true, data:""},
          {type: "button", name: "test_button", label: "Button_check1" , data:"Dynamic_button"}
        ]
      };

      $scope.submitForm = function(){
        $log.debug($scope.entity);
      }
})
  .directive("dynamicName",function($compile){
    return {
        restrict:"A",
        terminal:true,
        priority:1000,
        link:function(scope,element,attrs){
            element.attr('name', scope.$eval(attrs.dynamicName));
            element.removeAttr("dynamic-name");
            $compile(element)(scope);
        }
    }
})

<!DOCTYPE html>
<html>

  <head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
     <script src="FormGeneration.js"></script>
  </head>
  <body ng-app="test_module" >
  <div ng-controller="DynamicFormController">
    <h3>Dynamic Form Generation</h3>
 
 <form name="myForm" ng-submit="submitForm()">
 <div ng-repeat="field in entity.fields">    
  <ng-form name="form">
  <!-- my test result starts-->
  <div ng-if="field.type=='button'">
      <label><h3>{{field.label}}</h3></label>
      <div>
      <input type="{{ field.type}}" name="{{ field.name }}" value ="{{ field.data}}" >
      </div>
  </div>
  <!-- my test result Ends-->

   <div ng-if="field.type=='text'">
      <label>{{field.label}}</label>
      <div>
        <input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" data-ng-model="field.data" required/>
         <!--<span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.required">Required!</span>.-->
         <span  data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>
      </div>
    </div>

  </ng-form>

 </div>


  <br/>
  <button ng-disabled="myForm.$invalid" type="submit" id="submit">normal button Submit</button>
  <br/>
  <!-- <pre>{{entity|json}}</pre> -->
   <br/>
       
 </form>
 </div>
  </body>

</html>

我给了按钮属性，例如：

{type: "button", name: "test_button", label: "Button_check1" , data:"Dynamic_button"}

没有提供服务/功能。

【问题讨论】：

尝试使用角度模块 angular-schema-form github.com/Textalk/angular-schema-form

标签： json angularjs

【解决方案1】：

如果你想为你的 json 提供一个属性服务/功能，那么就像你通过添加一样使用它

ng-click="$eval(field.function)"

var app = angular.module('test_module',[]);
app.controller('DynamicFormController', function ($scope, $log) {
    $scope.entity = {
      name : "Test", 
      fields :
        [
          {type: "text", name: "firstname", label: "Name" , required: true, data:""},
          {type: "text", name: "city", label: "City" , required: true, data:""},
          {type: "button", name: "test_button", label: "Button_check1" , data:"Dynamic_button", function : 'test()'}
        ]
      };

      $scope.submitForm = function(){
        $log.debug($scope.entity);
      }

      $scope.test = function(){
        $log.debug('clicked');
      }
})
  .directive("dynamicName",function($compile){
    return {
        restrict:"A",
        terminal:true,
        priority:1000,
        link:function(scope,element,attrs){
            element.attr('name', scope.$eval(attrs.dynamicName));
            element.removeAttr("dynamic-name");
            $compile(element)(scope);
        }
    }
})

<!DOCTYPE html>
<html>

  <head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
     <script src="FormGeneration.js"></script>
  </head>
  <body ng-app="test_module" >
  <div ng-controller="DynamicFormController">
    <h3>Dynamic Form Generation</h3>
 
 <form name="myForm" ng-submit="submitForm()">
 <div ng-repeat="field in entity.fields">    
  <ng-form name="form">
  <!-- my test result starts-->
  <div ng-if="field.type=='button'">
      <label><h3>{{field.label}}</h3></label>
      <div>
      <input type="{{ field.type}}" name="{{ field.name }}" value ="{{ field.data}}" ng-click="$eval(field.function)" >
      </div>
  </div>
  <!-- my test result Ends-->

   <div ng-if="field.type=='text'">
      <label>{{field.label}}</label>
      <div>
        <input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" data-ng-model="field.data" required/>
         <!--<span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.required">Required!</span>.-->
         <span  data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>
      </div>
    </div>

  </ng-form>

 </div>


  <br/>
  <button ng-disabled="myForm.$invalid" type="submit" id="submit">normal button Submit</button>
  <br/>
  <!-- <pre>{{entity|json}}</pre> -->
   <br/>
       
 </form>
 </div>
  </body>

</html>

【讨论】：