我有一个控制器,我有一个名为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初始化,具体取决于字段类型,所以 - 例如 - 如果scope
被限制,我需要在该输入上初始化一个JQuery插件。
我尝试设置一个函数,我在其中构造HTML字符串,然后将其打印在ngRepeat
中,但我将文本作为纯文本(即使使用$sce.trustAsHtml()
),没有运气。
有没有办法可以动态编写输入/ html来添加到文档中 - 并处理一些Javascript逻辑 - 我可以动态地附加一些AngularJS属性(比如ngModel
所以它的值得到数据 - 与对象绑定)?
输入将在ngRepeat指令中,因此我可以访问迭代的对象,我可以将它们作为变量传递给函数。
谢谢!
答案 0 :(得分:1)
答案 1 :(得分:1)
这是一个好的开始。寻求指令可能是个好主意。 另外,我认为有这样的表单生成器可以处理这类工作: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>