如何使用json在angular js中構建動態控件？

我正在做一個角度js項目。現在控件是靜態的。但客戶想要創建基於數據庫的html控件。如何使用json在angular js中構建動態控件？

我有控制規範的表

對於例如：

類型：文本/下拉/收音機/複選框

事件：平變化/的onblur /的onfocus

屬性：「顏色：紅色」

如何生成可以解析數據庫值到html控件的動態模型？

任何幫助將非常感激...

來源

2015-05-20 user416

這是很容易使用ng-repeat指令。請注意，我如何將模型的值分配回ng重複中的範圍變量。這可以讓我稍後檢索它。

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>

來源

2015-05-20 15:34:46

感謝艾略特......這有很大幫助..我怎樣才能觸發可以隱藏子控件的事件？ – user416

你想在什麼事件上隱藏子控件？你是不是也想要嵌套控件？你能給個例子嗎？ –

我想嵌套控件..例如：如果單擊是的單選按鈕，然後文本框應該顯示...此外，我希望這從數據模型，而不是直接從JSON ... – user416

如何使用json在angular js中構建動態控件？

回答

相關問題