Question

0 0

引入了controller，为什么一直报错Uncaught Error: [$injector:nomod]

初衷是要实现一个三级联动
正常注入了controller，仍然报错

将controller.js 改为angular.module('ngShowcaseApp'，[])
页面不显示数据


 <!DOCTYPE html>
<html 
ead>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewprot" content="width=device-width">
    <title>Document</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/todc-bootstrap/3.1.1-3.2.1/todc-bootstrap.min.css">
</head>
<body ng-app="ngShowcaseApp" ng-controller="ctrl.select.cascade">
   <div class="row">
          <div class="col-md-4">
              <select class="form-contrl" ng-model="vm.country" ng-options="country.label for country in vm.country">
                  <option value="">--请选择国家--</option>
              </select>
          </div>
          <div class="col-md-4" ng-if="vm.country.provinces">
              <select class="form-contrl" ng-model="vm.province" ng-options="province.label for value in vm.provinces">
                  <option value="">--请选择省份--</option>
              </select>
          </div>
          <div class="col-md-4" ng-if="vm.province.cities">
              <select class="form-contrl" ng-model="vm.city" ng-options="city.label for value in vm.cities">
                 <option value="">--请选择城市--</option>
              </select>
          </div>
   </div>
   <div>您选择的是:{{country.label}} -- {{province.label}} -- {{city.label}}</div>

   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>    
    <script src="data.controller.js"></script>
    <script src="data.js"></script>
</body>
</html>


 'use strict';

angular.module('ngShowcaseApp'，[])
.controller('ctrl.select.cascade',function($scope, CityData) {
    var vm = $scope.vm = {};
    vm.countries = CityData;
    //更换国家时清空省
    $scope.$watch('vm.country',function(country) {
        vm.province = null;
    });
    //更换省的时候清空市
    $scope.$watch('vm.province', function(province) {
        vm.city = null;
    });
});


 'use strict';

angular.module('ngShowcaseApp').constant('CityData', [
  {
    label: '中国',
    flag: 'cn.png',
    provinces: [
      {
        label: '北京',
        cities: [
          {
            label: '朝阳区'
          },
          {
            label: '宣武区'
          },
          {
            label: '海淀区'
          }
        ]
      },
      {
        label: '河北',
        cities: [
          {
            label: '石家庄'
          },
          {
            label: '承德'
          },
          {
            label: '唐山'
          }
        ]
      }
    ]
  },
  {
    label: '美国',
    flag: 'us.png',
    provinces: [
      {
        label: '纽约',
        cities: [
          {
            label: '曼哈顿区'
          },
          {
            label: '皇后区'
          }
        ]
      },
      {
        label: '德克萨斯州',
        cities: [
          {
            label: '休斯顿'
          },
          {
            label: '达拉斯'
          }
        ]
      },
      {
        label: '加利福尼亚州'
      }
    ]
  }
]);

web前端开发 HTML angularjs JavaScript

9 years, 4 months ago