Menu
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>
559
Create a button and on clicking this button we will dynamically add the input fields. Now write the click() function to handle the adding and removing functionality. Use the append() method to add the input field code to the existing HTML document.
Answer: Use the jQuery submit() Method You can use the submit() method to submit an HTML form (i.e. ) using jQuery. The jQuery code in the following example will submit the form on click of the button (i.e. the element) which has the type attribute set to button (i.e. type=”button” ).
Dynamic input field allows providing multiple values in a form. It is very useful when you want to receive multiple inputs for the same field in an HTML form. The dynamic input fields feature can be easily integrated using jQuery. You can add multiple fields and remove fields easily.
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
123
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
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
