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)元素。

-- -------------------- ---- -------
------- -------------- ----------------------
  ------- ----------------------
  ------- ------------------------
  ------- ---------------------------
  ------- ------------------------
  ------- ------------------------------
---------

------- ----------- ---------------------- ---------------------------
  ------- ----------------------
  ------- --------------------------
  ------- ---------------------------
  ------- --------------------------
  ------- ------------------------
  ------- ------------------------
---------

------- ---------- ---------------------- ------------------------
  ------- ----------------------
  ------- ------------------- -----------------
  ------- ----------------- -----------------
  ------- --------------- ----------------
  ------- -------------- --------------
  ------- -------------- --------------
---------

JS

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

-- -------------------- ---- -------
---------------------
    ----------------- -------- -------- -
      ------------------- - -
        -- -
          ----- ---------
        --
        -- -
          ----- -----------
        -
      --
      ------------------- - -
        -- -
          ----- ---------- ---------
        --
        -- -
          ----- -------- ---------
        -
      --
    ---

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 …’)

示例代码

完整代码示例：

-- -------------------- ---- -------
--------- -----
----- --------- -------------
------
  ----- ----------------
  -------------- -------- ------ ------ ---------------
  ----- ---------------- ------------------------------------------------------------------------------------------------
  ------- --------------------------------------------------------------------------------------
  ------- ----------------------------------------------------------------------------------------------
  ------- -------------------------------------------------------------------------------------------
  ------- ------------------------------------------------------------------------------------------------------
  ------- ----------------------------------------------------------
  ------- ----------------------------------------------------------
  ------- -----------------------
    --------------------- -------------- ------------------------
      ----------------- -------- -------- -
        ------------- - -
          -- -
            ----- ------
          --
          -- -
            ----- ------
          --
          -- -
            ----- ------
          --
          -- -
            ----- ------
          --
          -- -
            ----- ------
          --
          -- -
            ----- ------
          --
          -- -
            ----- ------
          --
        --
        ------------ - -
          -- -
            ----- ------
          --
        --

        ------------------- - -------- -- -
          ------------------- - -
            -- -
              ----- ------
            --
            -- -
              ----- ------
            --
            -- -
              ----- ------
            --
          --
        --
      ---
  ---------
-------
----- -------------------
  ------
    --------------------
      -------------------
      ---------- ------------- -------------------
        ---------- -------------- -- -- ------- -----------------------------------
      ------------
    ---------------------
    --------------------
      ---------------- ------------- ----------------------
      ---------- --------- ---------------------- ------------------------- -------------------- ------------------ --------------------------- ---------------- ----------
        ---------- -------------- -- -- ------ -----------------------------------
      ------------
    ---------------------
  -------
-------
-------

注意事项

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

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

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