zoukankan      html  css  js  c++  java
  • angularjs三级联动

    html

    <div ng-controller="AjaxCtrl">
          <h1>AJAX - Oriented</h1>
        <div>
            Country: 
            <select id="country" ng-model="country" ng-options="country for country in countries">
              <option value=''>Select</option>
            </select>
        </div>
        <div>
            City: <select id="city" ng-disabled="!cities" ng-model="city" ng-options="city for city in cities"><option value=''>Select</option></select>
        </div>
        <div>
            Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>        
        </div>
    </div>
      <div ng-controller="StaticCtrl">
          <h1>Static - Oriented</h1>
          <p>This approach may be better when you have the entire dataset</p>
        <div>
            Country: 
            <select id="country" ng-model="cities" ng-options="country for (country, cities) in countries">
              <option value=''>Select</option>
            </select>
        </div>
        <div>
            City: <select id="city" ng-disabled="!cities" ng-model="suburbs" ng-options="city for (city, suburbs) in cities"><option value=''>Select</option></select>
        </div>
        <div>
            Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>        
        </div>
      </div>

    js

    function AjaxCtrl($scope) {
        $scope.countries = ['usa', 'canada', 'mexico', 'france'];
        $scope.$watch('country', function(newVal) {
            if (newVal) $scope.cities = ['Los Angeles', 'San Francisco'];
        });
        $scope.$watch('city', function(newVal) {
            if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
        });
    }
    
    function StaticCtrl($scope) {
        $scope.countries = {
            'usa': {
                'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
                'Los Angeles': ['Burbank', 'Hollywood']
            },
            'canada': {
                'People dont live here': ['igloo', 'cave']
            }
        };
    }

    参考:http://jsfiddle.net/annavester/Zd6uX/

  • 相关阅读:
    倒序三角形
    有时间了
    测试一个数是不是素数
    初学C++编写小程序
    N!的递归调用
    1+...+5的递归调用
    1!+....+5!
    菱形块
    23.git简单使用
    27.flask学习
  • 原文地址:https://www.cnblogs.com/leejersey/p/4711376.html
Copyright © 2011-2022 走看看