/* ------------------------------------------------------- * Filename: Adding Form Fields Dynamically * Website: http://www.shanidkv.com * Description: Shanidkv AngularJS blog * Author: Muhammed Shanid [email protected] ---------------------------------------------------------*/ var app = angular.module('angularjs-starter', []); app.controller('MainCtrl', function($scope) { $scope.choices = [{id: 'choice1'}, {id: 'choice2'}]; $scope.addNewChoice = function() { var newItemNo = $scope.choices.length+1; $scope.choices.push({'id':'choice'+newItemNo}); }; $scope.removeChoice = function() { var lastItem = $scope.choices.length-1; $scope.choices.splice(lastItem); }; });
<div ng-app="angularjs-starter" ng-controller="MainCtrl"> <fieldset data-ng-repeat="choice in choices"> <select> <option>Mobile</option> <option>Office</option> <option>Home</option> </select> <input type="text" ng-model="choice.name" name="" placeholder="Enter mobile number"> <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button> </fieldset> <button class="addfields" ng-click="addNewChoice()">Add fields</button> <div id="choicesDisplay"> {{ choices }} </div> </div>
fieldset{ background: #FCFCFC; padding: 16px; border: 1px solid #D5D5D5; } .addfields{ margin: 10px 0; } #choicesDisplay { padding: 10px; background: rgb(227, 250, 227); border: 1px solid rgb(171, 239, 171); color: rgb(9, 56, 9); } .remove{ background: #C76868; color: #FFF; font-weight: bold; font-size: 21px; border: 0; cursor: pointer; display: inline-block; padding: 4px 9px; vertical-align: top; line-height: 100%; } input[type="text"], select{ padding:5px; }