Toggle inputfields based on radiobuttons using angularjs?

Question

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?

angular is not able to find your application module. Have you injected script properly? — dhavalcengg
– dhavalcengg, Commented Jan 27, 2015 at 14:43
That gets rid of the errormessage, but the page does not react when I change the radiobuttons. — Frode Lillerud
– Frode Lillerud, Commented Jan 27, 2015 at 14:59

dhavalcengg · Accepted Answer · 2015-01-27 15:09:11Z

1

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>

answered Jan 27, 2015 at 15:09

dhavalcengg

4,7131 gold badge20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Frode Lillerud Over a year ago

Thank you! Also, I see you changed the radiobuttons from using ng-value to just value. That was also an important change.

Collectives™ on Stack Overflow

Toggle inputfields based on radiobuttons using angularjs?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related