Angularjs 动态生成表单上的角度双向数据绑定

我有三个按钮，动态生成三个稍有不同的表单。我在创建双向数据绑定时遇到问题。每个表单的绑定都相同（例如，如果我添加表单A、B和C，并在表单A的“注释”字段中输入注释，该注释也将出现在表单B和C上）。我想做的是，每个表单都有自己的值，所以如果我在表单a中输入一条注释，这个注释只会出现在表单a的实例中。如果我添加另一个表单a并在那里输入不同的注释，除了表单a的第二个实例之外，它不应该出现在其他任何地方

我用我的例子/问题创建了这个plunker

控制器：

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 [];
  });

应用程序

---

感谢您的帮助和/或建议。

您正在将所有表单绑定到同一对象的属性

iti

。每个

表单

都应该绑定到自己的视图模型对象。不清楚为什么该对象绑定到

myFactory

（这本身就与它的定义方式相混淆）

因此，为每个表单创建一个新对象（在本例中，我将远离

myFactory

）：

---

$scope.$watch

是你的朋友。

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

.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>