AngularJS: 动态分配 NgModel

Question

我有一个控制器，其中有一个名为 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 指令中，因此我可以访问迭代的对象，我可以将它们作为变量传递给函数。

谢谢！

Answer 1

我想你要找的是 $compile 服务

Angular Documentation for $compile

$compile(element.contents())(scope);

Example in plunkr

Answer 2

这是一个好的开始。寻求指令可能是个好主意。另外，我认为有这样的表单生成器可以处理这种类型的工作：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>

AngularJS: 动态分配 NgModel

AngularJS: Assign NgModel dynamically

javascript

jquery

dynamic

angularjs

angular-ngmodel

问题