使用angularjs基于单选按钮切换输入字段?

时间:2015-01-27 14:14:46

标签: angularjs

我是AngularJS的新手。

我正在构建一个包含多个<input type='text'...字段的表单。 在表格的顶部,我有两个单选按钮,您可以选择是否是私人客户或商务客户。更改radiobuttons的值应该隐藏/显示一些输入字段。

这是我的完整示例(它不起作用......)

<!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>

我在控制台中遇到的错误是

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)

有谁能看到我在这里做错了什么?

1 个答案:

答案 0 :(得分:1)

结帐this

将脚本更改为以下

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

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

 </script>