How to build dynamic controls in angular js using json?

Question

I am working on a angular js project. Right now the controls are static. But client wants to create the html controls based on database.

I have a table with controls specification

For eg:

type : text/dropdown/radio/checkbox

events : onchange/onblur/onfocus

attributes:"color:red"

How can I generate the dynamic model which can parse database value to html controls?

Any help would be really appreciated...

Elliot Swart · Accepted Answer · 2015-05-20 16:22:22Z

3

This is pretty easy using the ng-repeat directive. Note how I assign the value of the model back to the scope variable in the ng-repeat. This allows me to retrieve it later.

angular.module('formModule', []).
controller('DynamicFormController', ['$scope',
  function($scope) {

    //Set equal to json from database
    $scope.formControls = [{
        name: "Name",
        type: "text"
      }, {
        name: "Age",
        type: "number",
        color: "red"
      },

      {
        name: "UseNestedControls",
        type: "checkbox",
        nestCondition: true,
        nestedControls: [{
          name: "NestedText",
          type: "text"
        }]
      }
    ];


  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="formModule">
  <div ng-controller="DynamicFormController">
    <form>
      <div ng-repeat="input in formControls">
        <label>{{input.name}}</label>
        <input type="{{input.type}}" ng-model="input.value" ng-style="{'color':input.color}" />
        <div ng-repeat="nestedInput in input.nestedControls" style="margin-left:20px" ng-show="input.value == input.nestCondition">
          <label>{{nestedInput.name}}</label>
          <input type="{{nestedInput.type}}" ng-model="nestedInput.value" ng-style="{'color':nestedInput.color}"/>
        </div>
      </div>
    </form>
    <div ng-repeat="input in formControls">
      <span>{{input.name}} = {{input.value}}</span>
      <div  ng-repeat="nestedInput in input.nestedControls" style="margin-left:20px">
        <span>{{nestedInput.name}} = {{nestedInput.value}}</span>
        </div>
    </div>
  </div>
</body>

edited May 20, 2015 at 16:22

answered May 20, 2015 at 15:34

Elliot Swart

4393 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user416 Over a year ago

Thanks Elliot... This helps a lot.. How can i trigger a event that can hide child controls?

Elliot Swart Over a year ago

On what event do you want to hide child controls? Also are you saying you want nested controls? Can you give an example?

user416 Over a year ago

I would like to have nested controls.. For eg: if click yes of radio button then text box should display... Also I want this from a data model , not straight away from json...

Elliot Swart Over a year ago

Edited snippet to include nested control. Note that this is one level of nesting. Further layers of nesting could be programmed using the same method

Collectives™ on Stack Overflow

How to build dynamic controls in angular js using json?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related