Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你可以创建一个包含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/

Answer 2

尝试使用此代码在输入

上创建动态模型

工作代码Clck Here

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

维护以前的数据使用副本

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

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

2 个答案: