如何在我的模板 angularjs 中使模型动态化

Question

我的指令中有一个带有文本框的模板，单击按钮（添加）时，我重复相同的指令 10 次，因此文本框将出现 10 次，但每个文本框的 ng-model 将保持相同，我需要动态化，以便在模板 ng-model 的每次重复时变得不同。 问题是我无法为文本框创建动态 ng-model 以区分输入的值，以便我可以在控制器中访问它。如何使文本框模型动态化。

App.directive("configDirectives", function($compile) {
      return {
        restrict: 'EA',
        link: function(scope, element, $attr) {
          console.log('Scope in directive : ' + scope);
          scope.add = function() {
            console.log("Inside directive value of satCount", satCount++);
            $newDirective = angular.element('<add-config></add-config>');
            element.append($newDirective);
            $compile($newDirective)(scope);
            console.log('Scope in directive : ' + scope);
          }
        }
      }).directive("addConfig", function() {
        return {
          restrict: 'AE',
          template: '<div>{{scope.satCount}}' +
            '<input type="text" ng-model="x"/>' +
            '</div>',
          link: function(scope, element, attribute) {
            scope.remove = function() {
              element.remove();
            }
          }
        });
      <!-- Controller -->
      (function() {
        var self = null;
        var ConfigRuleClass = Class.extend({
          init: function($scope, configService) {
            self = this;
            self.$scope = $scope;
          },
          save: function() {
            console.log("values from parent configuration---");
            console.log("config1---", self.lstConfigs.name);
            console.log("Dynamic Filed Data" + self.dynamicConfigs);

          }
        });
        App.controller("ConfigRuleCntrl", ['$scope', 'configService', ConfigRuleClass]);
      })();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="xx" data-ng-controller="ConfigRuleCntrl as y">
  <input type="text" ng-model="y.x" />
  <button data-ng-click="add()">Add</button>
  <br>
  <button data-ng-click="y.save()">SAVE</button>
  <config-directives></config-directives>
</div>

Answer 1

尝试使用此代码在使用输入时创建动态模型

工作代码点击Here

<input type="text" ng-model="newObject[item.name]">

要保持以前的数据使用副本

 var original = Data.data;
 $scope.newObject =angular.copy(original);

Answer 2

您可以创建一个包含 10 个对象的数组并用作 ng-repeat 的源。
对象如下：

[
   { id:1 value:'' },
   { id:2 value:'' },
   ...
]

还有html：

<input type="text" ng-repeat="entry in entries track by entry.id" ng-model="entry.value"></input>

我创建了一个 jsFiddle 来展示它是如何工作的： http://jsfiddle.net/un1g3fao/2/