如何在我的 angularjs 应用程序中使用 jsfiddle 代码

Question

I have to use this jsfiddle code in my application, as I am going to enter all the code in one page company.html, it shows me only this instead of this . Could anybody please explain me why is this problem occuring, i think the problem is with this

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);
};

});

regarding to module name or kind of that. I am getting this error in browser console:

Answer 1

You are getting error because of your Immediately Invoked Function Expression . you have to change it like below :

 /* ------------------------------------------------------- * Filename: Adding Form Fields Dynamically * Website: http://www.shanidkv.com * Description: Shanidkv AngularJS blog * Author: Muhammed Shanid shanidkannur@gmail.com ---------------------------------------------------------*/ 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 :)