Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Javascript / Jquery

Clone Elements In Angularjs

Post a Comment
I need to duplicate some input fields in order to handle data from clients. I have done it with jQuery http://jsfiddle.net/m7R3f/1/ HTML:

Solution 1:

If you want to clone html element, the best way to use ng-repeat directive.

Your Controller

var App = angular.module('App', []).controller('Test', ['$scope',
  function($scope) {

    $scope.inputCounter = 0;
    $scope.inputs = [{
      id: 'input'
    }];
    $scope.add = function() {
      $scope.inputTemplate = {
        id: 'input-' + $scope.inputCounter,
        name: ''
      };
      $scope.inputCounter += 1;
      $scope.inputs.push($scope.inputTemplate);
    };

  }
])
<!DOCTYPE html>
<html ng-app="App">

<head lang="en">
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="Test">
  <fieldset id="fields-list">
    <div class="pure-g entry" ng-repeat="input in inputs track by input['id']">
      <div class="pure-u-1-5">
        <input type="text" class="pure-input-1" id="input" name="input-1">
      </div>
      <div class="pure-u-1-5">
        <input type="text" class="pure-input-1" id="date" name="date">
    </div>
    <div class="pure-u-1-5">
        <input type="text" class="pure-input-1" id="input-2" name="input-2">
    </div>
    </div>
  </fieldset>
  <button type="button" id="add" ng-click="add()">Add</button>

</body>

</html>

Angular prevents of creation duplicated elements, to avoid this, use track by like in the example


Solution 2:

You should create an array and use ng-repeat in your HTML. Each object in the array can contain the data necessary to populate your divs. If you want to start with three entries, then add the data for those three. If you want to add more, then simply push onto the array. Because of Angular's 2-way data binding your form field will appear once the element is pushed onto the array.

For more details on how to do this, checkout the To Do example on Angular's home page.


Solution 3:

How about this(Fiddle)

add two more ng-model and push those models

$scope.add = function(){
        $scope.items.push($scope.newitem1,$scope.newitem2,$scope.newitem3); 
}

Post a Comment for "Clone Elements In Angularjs"