我有一个控制器,其中我有一个名为 fields
的数组。该数组具有以下结构(以某些数据为例(:
[
{
"name": "Demarcación",
"type": "multiple",
"scope": "restricted",
"icon": "location-arrow",
"order": 1,
"id": 1,
"possible_values": [
{
"id": 1,
"field_id": 1,
"name": "Demarcación 1"
},
{
"id": 2,
"field_id": 1,
"name": "Demarcación 2"
},
{
"id": 3,
"field_id": 1,
"name": "Demarcación 3"
}
],
"values": [
{
"id": 3,
"value": "Demarcación 3"
}
]
},
...
]
然后,我想创建一个表单,其中输入是根据字段的type
和scope
动态组建的。因此,如果scope
等于free
,则添加textarea
。否则,添加了input text
。
我需要执行一些JavaScript初始化,具体取决于字段 type,也可以 - 因此 - 例如 - 如果限制了scope
,我需要在该输入上初始化jQuery插件。
我尝试设置一个函数,其中我构造了HTML字符串,然后在ngRepeat
中打印,但是我将文本作为纯文本(甚至使用$sce.trustAsHtml()
(,没有运气。
问题
有什么方法可以动态编写以添加到文档的输入/html-并处理一些JavaScript逻辑 - 我可以动态附加一些AngularJS属性(例如ngModel
(?
输入将在ngrepeat指令中,因此我可以访问迭代的对象,并且可以将它们作为变量传递到函数中。
谢谢!
我认为您要寻找的是$ Compile Service
$ compile
的角文档$compile(element.contents())(scope);
plunkr中的示例
这是一个不错的开始。这可能是一个好主意。另外,我认为有一些形式的生成器来处理此类工作:http://schemaform.io/
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.fields = window.fields;
$scope.fieldInit = function(field){
//console.log('things and stuff: ' + JSON.stringify(field));
}
});
window.fields = [
{
"name": "field 1",
"type": "text",
"scope": "restricted",
"icon": "location-arrow",
"order": 1,
"id": 1,
"possible_values": [
{
"id": 1,
"field_id": 1,
"name": "Demarcación 1"
},
{
"id": 2,
"field_id": 1,
"name": "Demarcación 2"
},
{
"id": 3,
"field_id": 1,
"name": "Demarcación 3"
}
],
"values": [
{
"id": 3,
"value": "Demarcación 3"
}
]
},
{
"name": "field 2",
"type": "multiple",
"scope": "restricted",
"icon": "location-arrow",
"order": 1,
"id": 2,
"possible": [
{
"id": 1,
"field_id": 1,
"name": "Demarcación 1"
},
{
"id": 2,
"field_id": 1,
"name": "Demarcación 2"
},
{
"id": 3,
"field_id": 1,
"name": "Demarcación 3"
}
],
"values": [
{
"id": 3,
"value": "Demarcación 3"
}
]
}
]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="field in fields" ng-init="fieldInit(field)">
{{field.name}}
<input ng-model="field.model" ng-if="field.type != 'multiple'" type="{{field.type}}"/>
<select ng-model="field.model" ng-if="field.type == 'multiple'"
ng-options="val.name for val in field.possible" />
<div>
</div>