Question

经过几个小时的搜索后，我仍无法找到问题的答案。我正在使用基于数据库值的文本字段填充动态表单，但无法将字段成功绑定到我的模型。这是场景：

我的控制器中有一个“项目”模型，其中包含许多与项目相关的信息（名称，开始日期，参与者，类别等），但现在我们只关注“project.name”属性。在数据库中，我使用许多相关字段配置“表单”，其中每个字段都有一个属性，指向它在我的视图模型中对应的属性（例如“project.name”）。在运行时，我会动态地将这些字段添加到HTML表单，并尝试将ng-model属性设置为“modelBinding”值，在本例中为“project.name”。

Program received signal SIGSEGV, Segmentation fault.

这将导致文本框被添加到我的表单中，其中ng-model =“formField.modelBinding”和textbox value ='project.data'。

我想要实现的是设置ng-model ='project.data'，换句话说，将formField.modelBinding替换为formField.modelBinding的值。

一种似乎合乎逻辑的方法是

<div ng-repeat="formField in form.formFields">
            <input ng-model="formField.modelBinding" /></div>

但这显然无法奏效。我试图用ng-bind-html插入HTML标签，但这似乎只适用于ng-bind，而不是ng-model。

有什么建议吗？

Answer 1

假设您尝试使用formField中的名称将值绑定到模型，您可以创建指令（又名ngModelName）以按名称从此值绑定模型

观察：我的第一个想法是使用像model[formField.modelBinding]这样的简单访问器，它可以简单地将formField.modelBinding绑定到范围内的model成员。但是，我没有使用属性访问器，因为它将创建一个由formField.modelBinding值命名的属性，而不是预期的正确对象层次结构。例如，此问题中描述的案例project.data会创建一个对象{ 'project.data': 'my data' }，但不会创建{ 'project': { data: 'my data'}}。

angular.module('myApp', [])
  .directive('ngModelName', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        priority: 1000,
        link: function (scope, element, attrs) {
          
          scope.$watch(attrs.ngModelName, function(ngModelName) {
                // no need to bind a model
                if (attrs.ngModel == ngModelName || !ngModelName) return;

                element.attr('ng-model', ngModelName);
                
                // remove ngModel if it's empty
                if (ngModelName == '') {
                    element.removeAttr('ng-model');
                }

                // clean the previous event handlers,
                // to rebinded on the next compile
                element.unbind();

                //recompile to apply ngModel, and rebind events
                $compile(element)(scope);
            });
          }
    };
  }])
  .controller('myController', function ($scope) {
    $scope.form = {
      formFields: [
        {
          modelBinding: 'model.project.data'
        }
      ]
    };
  
    $scope.model = {};
  });

angular.element(document).ready(function () {
  angular.bootstrap(document, ['myApp']);  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myController">
  <div ng-repeat="formField in form.formFields">
      <input ng-model-name="formField.modelBinding" placeholder="{{ formField.modelBinding }}" />
  </div>
  <div>
    <pre>{{ model | json }}</pre>
  </div>
</div>

Answer 2

我猜＆＃34; modelBinding＆＃34; attribute具有formfield的模型名称，因此，在这种情况下，您应该这样做：

<div ng-repeat="formField in form.formFields">
        <input ng-model="form.formFields[formField.modelBinding]" />
</div>

使用modelBinding作为从formFields检索的密钥。

绑定动态设置文本字段的ng-model属性

2 个答案: