Question

我有三个按钮，动态生成三种略有不同的形式。我在创建双向数据绑定时遇到了麻烦。每个表单的绑定都相同（例如，如果我添加表单A，B和C并在表单A的注释字段中输入注释，则该注释也将出现在表单B和C上）。我想要做的是每个表单都有自己的值，所以如果我在表单A中输入注释，这个注释只会出现在表单A的那个实例中。如果我添加另一个表单A并在那里输入不同的注释除了表格A的第二个实例，它不应该出现在其他地方。

我用我的示例/问题创建了这个plunker http://plnkr.co/edit/6S4fdJ6OQuOqJPFmH9yx?p=preview

控制器：

angular.module('myApp')
.controller('MainCtrl', ['$scope', 'MainFactory', function ($scope, MainFactory) {
    var ctrl = this;
    var frmCnt = 0;
    var dayCnt = 1;

    $scope.iti = MainFactory;

    var forms = [
      "frm1.html",
      "frm2.html",
      "frm3.html"
    ];

    ctrl.displayedForms = [];

    ctrl.addForm = function(formIndex) {
      ctrl.displayedForms.push(forms[formIndex]);
      console.log(ctrl.displayedForms.length);
    }

    ctrl.deleteNode = function(indx) {
      ctrl.displayedForms.splice(forms[indx], 1);
    }

    ctrl.isCollapsed = false;
  }]);

厂：

angular.module('myApp')
  .factory('MainFactory', function (){
    return [];
  });

应用

angular.module('myApp', ['ui.bootstrap', 'ngRoute'])

感谢您提供任何帮助和/或建议。

Answer 1

您将所有表单绑定到同一对象iti的属性。每个form都应绑定到自己的View Model对象。目前尚不清楚为什么该对象被绑定到myFactory（这本身就与它的定义方式混淆）。

因此，为每个表单创建一个新对象（出于本示例的目的，我将远离myFactory）：

.controller("MainCtrl", function($scope){
  $scope.formsVm = [];

  $scope.addForm = function(formIndex){
    $scope.formsVm.push(
      { 
        formVm: {}, // this will be your per-form ViewModel
        url: forms[formIndex]
      }
    );
  };

  // etc...
});

<div ng-repeat="form in formsVm" ng-init="iti = form.formVm">
  <ng-include src="form.url"></ng-include>
</div>

<强> Demo

动态生成表单上的Angular双向数据绑定

1 个答案: