Hello Reader's if you are looking to append the text boxes in your html form then Angular JS offeres you a very better way to do this than others and It is, We can append a textbox element in html a form dynamically using AngularJs.
For example in this blog we will give user to increase the options and append them in the several text boxes.
First create html file and paste the following code in it
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
var app = angular.module("myCarParts", []);
app.controller("myoptions", function($scope) {
$scope.products = ["Tyres", "Music System", "Seats"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
});
</script>
<div ng-app="myCarParts" ng-controller="myoptions">
<ul>
<li ng-repeat="x in products"><input type ="text" name = "parts[]" value = "{{x}}"></li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add it</button>
</div>
</body>
</html>
Now when you load this page angular will create a add a text field, which it will bind it to the application with the ng-model directive. For this a simple <li> tag will created and three default values will generated in textboxes. User can edit them. In the controller, make a function named addItem, It will use the user key values to append the new textboxes when a user will click addItem function.
Add a button, and give it an ng-click directive and pass the users option every time the button is hit by user. Also by using the some CSS you can transform the design and it will looks more better. Angularjs will run on client side so it makes tasks more fast. Which is most demanding concepts in HTML web development.
0 Comment(s)