CODEWITHSUNDEEP
angularjs
Frode Lillerud
Frode Lillerud

Reputation: 7394

Toggle inputfields based on radiobuttons using angularjs?

I'm new to AngularJS.

I'm building a form with several <input type='text'... fields. At the top of the form I've got two radiobuttons where you choose if this is a privatecustomer or a businesscustomer. Changing the values of the radiobuttons should hide / show some of the inputfields.

Here is my complete example (which isn't working...)

<!DOCTYPE html>
<html ng-app='myApplication'>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script id="angularScript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.js"></script>

</head>
<body>
  <div ng-controller="MyController">
   <div>
    <input type='radio' name='customertype' ng-model='customertype' ng-value='Company'>Company</input>
    <input type='radio' name='customertype' ng-model='customertype' ng-value='Person'>Person</input>
   </div>
   <div>
    <input ng-show="customertype=='Person'" type="text" id='Firstname' placeholder='Firstname'>
    <input ng-show="customertype=='Person'" type="text" id='Lastname' placeholder='Lastname'>
    <input ng-show="customertype=='Company'" type="text" id='Companyname' placeholder='Companyname'>
   </div>
</div>

<script type='text/javascript'>

 function MyController ($scope) {
    $scope.customertype='Company';
 }

 </script>

</body>
</html>

The error I get in the console is

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApplication due to:
Error: [$injector:nomod] Module 'myApplication' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.11/$injector/nomod?p0=myApplication
  at REGEX_STRING_REGEXP (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js:63:12)

Can anyone see what I'm doing wrong here?

Upvotes: 0

Views: 68

Answers (1)

dhavalcengg
dhavalcengg

Reputation: 4713

Checkout this

Change you script to following

<script type='text/javascript'>
var app = angular.module('myApplication', []);

app.controller('MyController', 
  function MyController ($scope) {
    $scope.customertype='Company';
 });

 </script>

Upvotes: 1

Related Questions