Get value using ng-model with append - Javascript

Question

Upon pressing add button in myform, I want to get the value in the input Name using ng-model. I am using append in my form to add the next column. However, I am facing issues in achieving this through the code below

function add(){
var stre;
stre="Name: <input type='text' ng-model='Name'><br>"
+"Result Name: <input type='text' value={{Name}}>"
$("#test").append(stre);
}

<!DOCTYPE html>
<html ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>

<div id="test">
<button type="button" onclick="add()">add</button><br>
</div>

</body>
</html>

How about ng-repeat ?

Rayon
– Rayon

2016-02-24 08:22:38 +00:00
Commented Feb 24, 2016 at 8:22 — Rayon
– Rayon, Commented Feb 24, 2016 at 8:22
Then how to get value in input? can u make example?

Sodiq Mr.
– Sodiq Mr.

2016-02-25 09:06:23 +00:00
Commented Feb 25, 2016 at 9:06 — Sodiq Mr.
– Sodiq Mr., Commented Feb 25, 2016 at 9:06

Rayon · Accepted Answer · 2016-02-25 09:58:36Z

Use ng-repeat instead of append

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item.

var myApp = angular.module('myApp', []);
myApp.controller('myController', myController);

function myController($scope) {
  $scope.elements = [];
  $scope.add = function() {
    $scope.elements.push({});
  };

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller='myController'>
    <div id="test">
      <div ng-repeat='elem in elements'>
        Name:
        <input type='text' ng-model='elem.name'>
        <br>Result Name:
        <input type='text' value={{elem.name}}>
        <hr>
      </div>
      <button type="button" ng-click="add()">add</button>
    </div>
  </div>
</div>

Fiddle here

Collectives™ on Stack Overflow

Get value using ng-model with append - Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related