如何使用json在angular js中构建动态控件？答案

【问题标题】：How to build dynamic controls in angular js using json?如何使用json在angular js中构建动态控件？
【发布时间】：2015-08-01 21:16:04
【问题描述】：

我正在开发一个 Angular js 项目。现在控件是静态的。但是客户想要创建基于数据库的html控件。

我有一个带有控件规范的表格

例如：

输入：文本/下拉/收音机/复选框

事件： onchange/onblur/onfocus

属性：“颜色：红色”

如何生成可以将数据库值解析为html控件的动态模型？

任何帮助将不胜感激......

【问题讨论】：

标签： html json angularjs dynamic controls

【解决方案1】：

使用 ng-repeat 指令非常容易。请注意我如何将模型的值分配回 ng-repeat 中的范围变量。这允许我稍后检索它。

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>

【讨论】：

谢谢 Elliot... 这很有帮助.. 如何触发可以隐藏子控件的事件？
您想在什么事件上隐藏子控件？你是说你想要嵌套控件吗？能举个例子吗？
我想要嵌套控件。例如：如果单击单选按钮的“是”，则应显示文本框...另外我希望从数据模型中获得此信息，而不是直接从 json 中获得。 .
编辑了 sn-p 以包含嵌套控件。请注意，这是一层嵌套。可以使用相同的方法对更多的嵌套层进行编程
谢谢！总是很乐意提供帮助！