Question

我需要根据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”}

没有提供服务/功能。

Answer 1

如果您想为您的json提供属性服务/功能，请使用与添加

相同的方法

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

＆＃13;

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);
        }
    }
})

＆＃13;

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

＆＃13;

动态表单使用动作按钮ng-click在angularjs中生成

1 个答案: