CODEWITHSUNDEEP
javascriptjqueryangularjs
Thang Nguyen
Thang Nguyen

Reputation: 1151

Clone elements in angularjs

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.

Upvotes: 2

Views: 16413

Answers (3)

Darryl
Darryl

Reputation: 1451

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.

Upvotes: 4

Vladyslav Babenko
Vladyslav Babenko

Reputation: 1369

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

Upvotes: 5

yashhy
yashhy

Reputation: 3096

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

Upvotes: 2

Related Questions