Clone elements in angularjs

Question

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:

<fieldset id="fields-list">
<div class="pure-g entry">
    <div class="pure-u-1-5">
        <input type="text" class="pure-input-1" id="input-1" 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>
</fieldset>
<button id="add">Add</button>

JS

$(document).ready(function ()
{
    $("#add").click(function ()
    {
        $(".entry:first").clone(false).appendTo("#fields-list");
    });
});

However I just start learning Angular and want to convert these code to Angular. I have read questions in stackoverflow and found the code with angularjs here: http://jsfiddle.net/roychoo/ADukg/1042/. However, it seem works only for ONE input field? Can I clone/duplicate several input fields using AngularJS? (in other word: convert my code above into AngularJS version?) Thank you very much.

I will remove the ID if needed. Just want to copy the entire class entry using Angular — Thang Nguyen
– Thang Nguyen, Commented Dec 4, 2013 at 5:30

Vladyslav Babenko · Accepted Answer · 2015-01-26 09:29:34Z

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

vittore · Accepted Answer · 2015-07-24 13:38:21Z

4

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.

edited Jul 24, 2015 at 13:38

vittore

17.6k6 gold badges46 silver badges84 bronze badges

answered Dec 4, 2013 at 6:03

Darryl

1,4511 gold badge12 silver badges19 bronze badges

Comments

yashhy · Accepted Answer · 2013-12-04 05:00:24Z

2

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

answered Dec 4, 2013 at 5:00

yashhy

3,1765 gold badges37 silver badges63 bronze badges

Collectives™ on Stack Overflow

Clone elements in angularjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related