How to dynamically add input form?

Question

I am trying to dynamically add input forms when "New Item" is clicked. But not really know how to write the code in the js part. Any idea?

Here is my code:

<!doctype html>
<html ng-app>
  <head>
    <title>Angular - My Notes</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">

  <body>
    <h1>My Notes</h1>
    <div ng-controller="Note">
      <input type="text" placeholder="Question">
      <input ng-class="{'blockInput': !inlineChecked}" type="text" placeholder="enter text...">
      <input type="checkbox" name="check" value="inline" ng-model="inlineChecked"> Inline
      <br>
      <button ng-click="add()">New Item</button>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
    <script type="text/javascript">

      var Note = function($scope){
        // create a variable contain new input forms?? 
      }


    </script>
  </body>
</html>

Anthony Chu · Accepted Answer · 2014-02-27 22:08:17Z

34

Use an array and ngRepeat...

<!doctype html>
<html ng-app>
  <head>
    <title>Angular - My Notes</title>

  <body>
    <h1>My Notes</h1>
    <div ng-controller="Note">
      <div ng-repeat="item in items">
        <input type="text" placeholder="{{item.questionPlaceholder}}" ng-model="item.question">
        <input ng-class="{'blockInput': !item.inlineChecked}" type="text" placeholder="enter text..." ng-model="item.text">
        <input type="checkbox" name="check" value="inline" ng-model="item.inlineChecked"> Inline
      </div>
      <button ng-click="add()">New Item</button>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
    <script type="text/javascript">

      var Note = function($scope){
        $scope.items = [];

        $scope.add = function () {
          $scope.items.push({ 
            inlineChecked: false,
            question: "",
            questionPlaceholder: "foo",
            text: ""
          });
        };
      }


    </script>
  </body>
</html>

JsBin... http://jsbin.com/fusapojo/4/edit?html,output

edited Feb 27, 2014 at 22:08

answered Feb 27, 2014 at 21:46

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jnthnjns Over a year ago

A little bit more will need to be added (ng-model on inputs). For example, in you jsBin add {{ items | json }} and fill in some of the form and you'll see :)

Jusleong Over a year ago

@Asok how to edit the placeholder value by angularjs?

Anthony Chu Over a year ago

@Asok Thanks. I didn't want to add more than was needed to the original. Updated now. :)

jnthnjns Over a year ago

@user3112938 You want a dynamic placeholder? I'll add an answer showing a way to do it, but Anthony's should be the one that is accepted. I was going to type it in here but it's too much text.

jnthnjns Over a year ago

@anthonychu +1, would you like to take the dynamic placeholder question or shall I?

|

Luiz Picanço · Accepted Answer · 2014-07-20 02:42:19Z

3

HTML:

<div ng-repeat="flavour in flavours" class="form-group">
    <label class="col-sm-1 control-label">Name</label>
    <div class="col-sm-2">
        <div class="input-group">
                <input type="text" class="form-control" placeholder="" ng-model="flavour.name">
        </div>                
    </div>
</div>

JS: $scope.flavours = [];

$scope.addFlavour = function () {
    $scope.flavours.push({ 
        name: "",
        pg: 100,
        vg: 0,
        quantity: 5.0
    });
}

answered Jul 20, 2014 at 2:42

Luiz Picanço

3694 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to dynamically add input form?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related