how to use jsfiddle code in my angularjs application

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:

Yes, I'm working on an AngularJS application, just this page is making me face this problem. Also my application module('bootstrapApp') — Sikandar Sahab, Dec 27 '17 at 05:41
Whenever you see `{{ }}` on the page in an AngularJs app, it means that you encountered some error which will be listed in the browser console. Please [edit] your question and provide that error message. — Claies, Dec 27 '17 at 05:41
Make sure you use angular1.2.1 for this code. That's what the author has used. — DrEarnest, Dec 27 '17 at 05:44
I added the browser console error message, please check out. @Claies — Sikandar Sahab, Dec 27 '17 at 05:53
well, the error says "The controller with the name 'MainCtrl' is not registered", which either means that your scripts are not loading in the correct order or your `ng-app` in your HTML isn't set to the correct module name. In this case, posting the code **you wrote** instead of the code you tried to **copy from** is necessary to understand the differences. — Claies, Dec 27 '17 at 05:54

score 1 · Answer 1 · answered Dec 27 '17 at 06:16

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 :)

how to use jsfiddle code in my angularjs application

1 Answers1