How to make models dynamic in my template angularjs

Question

I have a template with text box in my directive,on click of button(ADD) i am repeating the same directive 10 times so 10 times text box will come but ng-model will remain same for each text box and this i need to make dynamic so that on each repeat of template ng-model becomes different. Problem is I am not able to create dynamic ng-model for text box to distinguish between the values entered so that I can access it in my controller.How to make model of text box dynamic.

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>

on click of button(ADD) I am adding text box ,i.e on each click only once my template should be repeated.It is repeated using directive where I have written a add method which is called on click of add — satyendra kumar, Jul 10 '15 at 06:05
can you post the code for the directive and the code for the `add()` function, since they seem to be the main pieces of code here..... — Claies, Jul 10 '15 at 06:19
err never mind, it looks like you might have tried to include it, but didn't format it well, it's not actually showing up.... — Claies, Jul 10 '15 at 06:21
ok, so after editing the code to actually see what's going on, it's even more obvious that you aren't doing this the angular way. I keep saying this on multiple questions; Angular is perfectly capable of dynamically managing the DOM on it's own, you don't need to create Directives to do things that the built-in features like `ng-repeat` already handle. The angular way is to code against the Data, not the DOM. This is definitely coding against the DOM. See http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background?rq=1 — Claies, Jul 10 '15 at 06:28
see my answer to a *very* similar question yesterday: http://stackoverflow.com/questions/31312277/add-row-function-to-push-new-object-in-angular-ng-repeat/31312678#31312678 — Claies, Jul 10 '15 at 06:32
@Claies Yes I have added the code snippet,you can refer that above. — satyendra kumar, Jul 10 '15 at 08:32

Denis Thomas · Answer 1 · 2015-07-10T06:40:36.960

0

You could create an array of 10 objects and use as source for ng-repeat.
Objects would be like:

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

And the html:

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

I created an jsFiddle to show how it works: http://jsfiddle.net/un1g3fao/2/

edited Jul 10 '15 at 06:40

answered Jul 10 '15 at 05:51

Denis Thomas

1,012
1
8
17

I can not use ng-repeat because on click I want to repeat my template only once,I need solution without the usage of ng-repeat . – satyendra kumar Jul 10 '15 at 06:01
Then you can simply only add 1 entry to the repeat source. Or if that is not appropriate please include a plunker to show your specific problem. – Denis Thomas Jul 10 '15 at 06:03
what if requirement is for 100 times I cant use ng-repeat on click only once my template should be repeated. Thank you so much for your reply – satyendra kumar Jul 10 '15 at 06:08
@satyendrakumar your comment here doesn't make sense. What do you mean, your template should only be repeated once? your code is definitely showing you *trying* to repeat it multiple times.... – Claies Jul 10 '15 at 06:31
I added a fiddel to show how it works, and to check if that is what you need. Can you please describe how the behaviour in the fiddle is different than your requirement? – Denis Thomas Jul 10 '15 at 06:42
@DenisThomas your fiddle is definitely the angular way to do things, but I think you have an error, since Add 1x adds 2, and Add 10x adds 11. – Claies Jul 10 '15 at 06:45

vijay kani · Answer 2 · 2015-07-10T06:22:50.867

0

Try this code to create a dynamic Model on using input

Working Code Clck Here

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

To maintain the previous data use copy

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

edited Jul 10 '15 at 06:22

answered Jul 10 '15 at 06:03

vijay kani

140
8

I agree with ur solution but I have to repeat my template on click and only once on each click and I have to maintain the previous data also.So I cant use ng-repeat.Thank you so much for your reply – satyendra kumar Jul 10 '15 at 06:18
you most certainly *can* use `ng-repeat`; put your data into an array, and each time you want to add a new row, add a new element to the array. Angular will do the rest. – Claies Jul 10 '15 at 06:35

How to make models dynamic in my template angularjs

2 Answers2