current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 down vote favorite
2

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>
share|improve this question

2 Answers 2

up vote 10 down vote

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

share|improve this answer
    
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 :) –  Asok Feb 27 '14 at 21:50
    
@Asok how to edit the placeholder value by angularjs? –  Jusleong Feb 27 '14 at 21:55
    
@Asok Thanks. I didn't want to add more than was needed to the original. Updated now. :) –  Anthony Chu Feb 27 '14 at 22:02
1  
@Asok Added. Thanks for helping. –  Anthony Chu Feb 27 '14 at 22:08
1  
@AnthonyChu many thanks! –  Jusleong Feb 27 '14 at 22:10
up vote 1 down vote

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
    });
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.