You have encountered an error due to your usage of an
Immediately Invoked Function Expression
. To resolve this, modify it as shown below:
/* -------------------------------------------------------
* Filename: Adding Form Fields Dynamically
* Website: http://www.shanidkv.com
* Description: Shanidkv AngularJS blog
* Author: Muhammed Shanid <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acdfc4cdc2c5c8c7cdc2c2d9deeccbc1cdc5c082cfc3c1">[email protected]</a>
---------------------------------------------------------*/
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);
};
})(angularjs-starter);
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<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" style="visibility:hidden;">
</div>
</div>
If you Need the choices display to come up just let me know. Will add
that! Just copy the code and you are good to go. Make sure the CSS
part is inside your style tag while Angular inside your Script tag.
Happy Coding :)