npm包angularjs-material-selectchange使用教程-JavaScript中文网-JavaScript教程资源分享门户

Angularjs-material-selectchange 是一个方便前端开发人员实现基于AngularJS Material Design的下拉框联动的功能的npm包。本文将对npm包的使用方法、具体实现过程以及应该注意的事项进行介绍。

安装

要使用Angularjs-material-selectchange，您需要首先安装它。通过npm进行安装：

npm install angularjs-material-selectchange

导入

安装成功后，您需要在项目中导入Angularjs-material-selectchange。要做到这一点，请将以下代码添加到您的项目中：

import angular from 'angular';
import 'angularjs-material-selectchange/dist/angularjs-material-selectchange.js';

用法

配置

在您的应用程序主JS文件中注入 'materialSelectChange' 模块。

angular.module('app', ['materialSelectChange']);

HTML

为了使Angularjs-material-selectchange工作，您需要在HTML中使用定义的指令作为下拉菜单。初始下拉菜单可以是任何HTML下拉菜单(select)元素。

<select id="countries" ng-model="vm.select1">
  <option value="0">请选择</option>
  <option value="1">China</option>
  <option value="2">Pakistan</option>
  <option value="3">India</option>
  <option value="4">Afghanistan</option>
</select>

<select id="cities" material-select-change from-select-id="countries">
  <option value="0">请选择</option>
  <option value="1">Beijing</option>
  <option value="2">Shanghai</option>
  <option value="3">Karachi</option>
  <option value="4">Delhi</option>
  <option value="5">Kabul</option>
</select>

<select id="areas" material-select-change from-select-id="cities">
  <option value="0">请选择</option>
  <option value="1">Dongcheng District</option>
  <option value="2">Xicheng District</option>
  <option value="3">South Karachi</option>
  <option value="4">East Delhi</option>
  <option value="5">West Kabul</option>
</select>

JS

您需要配置 $ vm.city_options / $ vm.area_options从下拉列表的第一个选择中直接更新数组。

angular.module('app')
    .controller('vm', function ($scope) {
      $scope.city_options = {
        1: {
          name: 'Beijing'
        },
        2: {
          name: 'Shanghai啊'
        }
      };
      $scope.area_options = {
        1: {
          name: 'Dongcheng District'
        },
        2: {
          name: 'Xicheng District'
        }
      };
    });

Directive Options

fromSelectId String (required)

下面这些是删除后的高级设置

updateOnBlur Boolean (defaults to ‘true’)
query Function (optional)
params Object (optional)
areaOptions Object (optional)
deferred Boolean (defaults to ‘true’)
`loading’ String (defaults to ‘Searching …’)

示例代码

完整代码示例：

<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>Angular Material Select Change example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.12/angular-material.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.12/angular-material.min.js"></script>
  <script src="../dist/angularjs-material-selectchange.js"></script>
  <script src="../src/directive/material-select-change.js"></script>
  <script type="text/javascript">
    angular.module('app', ['ngMaterial', 'materialSelectChange'])
      .controller('vm', function ($scope) {
        $scope.cities = {
          0: {
            name: '请选择',
          },
          1: {
            name: '北京市',
          },
          2: {
            name: '上海市',
          },
          3: {
            name: '天津市',
          },
          4: {
            name: '重庆市',
          },
          5: {
            name: '深圳市',
          },
          6: {
            name: '南京市',
          },
        };
        $scope.areas = {
          0: {
            name: '请选择',
          },
        };

        $scope.refreshAreas = function () {
          $scope.area_options = {
            1: {
              name: '东城区',
            },
            2: {
              name: '西城区',
            },
            3: {
              name: '朝阳区',
            },
          };
        };
      });
  </script>
</head>
<body ng-controller="vm">
  <form>
    <md-input-container>
      <label>City</label>
      <md-select id="province" ng-model="select1">
        <md-option ng-repeat="(k, v) in cities" ng-value="k">{{v.name}}</md-option>
      </md-select>
    </md-input-container>
    <md-input-container>
      <label>Area<span style="color: red;">*</span></label>
      <md-select id="city" material-select-change from-select-id="province" query="refreshAreas" ng-model="select2" area-options="area_options" loading="Loading Areas...">
        <md-option ng-repeat="(k, v) in areas" ng-value="k">{{v.name}}</md-option>
      </md-select>
    </md-input-container>
  </form>
</body>
</html>

注意事项

所有下拉列表的第一个选择项采用默认选择，必须存在一个。
确保所有的下拉列表和选项ID和model名称都不重复。
静态下拉菜单和找不到选项的应该有充分的备份方案。
关于下拉列表的动态生成，请根据具体情况修改查询方法。

在使用过程中，如有不懂的地方或者遇到问题，可以参考demo或者官方文档寻求帮助，需要多多实践，多多尝试，才能更好地掌握这个技术。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e1fb81d47349e53d64