使用AngularJS UI Bootstrap自定义下拉框

上一篇文章我们简单介绍了UI Bootstrap渐进增强,侧重于通过修改样式来增强。今天我们来自定义一个下拉框组件,通过使用自定义指令来增强。我在http://www.riafan.com/bootstrap-select/中已经介绍过自定义下拉框的背景了,只不过现在我们是用AngularJS UI Bootstrap来实现。

一、选择原型

这个就不详细说了,基于UI Bootstrap的下拉菜单组件dropdown实现。Bootstrap风格的组件基本上都没选择状态,比较适合服务器渲染。客户端渲染下拉框肯定要不刷新保存当前项。明确这一点很重要,它关系到下一步我们要选择什么样的接口。

二、确定接口

封装组件最重要的就是确定接口。设计良好的组件我们遵循一些原则,比如说“单一责任原则原则”(SRP:Single Responsibility Principle)来保证高内聚低耦合,DRY(Don’t Repeat Yourself )原则来消除重复的代码。需要这些原则说白了说是组件尽量功能单一,复用性要强,通过组合而不是继承来实现功能复杂的组件。本实例要做自定义外观统一的下拉框,不要求附加自定义渲染项、实时搜索等炫酷功能,和原生下拉框功能差不多。基于此,我们确定以下接口:

  1. options:数据源(简单数组或关联数组);
  2. selected:当前选择项;
  3. labelField:label对应的数据源字段,默认为lable;
  4. valueField:value对应的数据源字段,默认为value;
  5. disabled:下拉框是否可用,默认为false

复用性强的组件问题基于数据驱动的,不管是用AngularJS、Vue.js、React,甚至什么框架都不用,基于数据的声明式方式一般都比基于DOM的命令式方式要灵活。在AngularJS中,将options作为输入的数据源,通过ng-repeat指令很容易就渲染出下拉列表。labelField和valueField两个可选参数设定了默认值,主要是为了适配不能直接满足需求的数据。当然如果options就简单数组就没有必要设置它们的。不难看出SOLID中的另一个原则:开放封闭原则(OCP The Open Closed Principle)

页面加载完成时会初始化一个选择项,或者用户在下拉框中选择某一项时会保存当前选项,点击提交按钮时会将当前选项对应的数据提交给后台,这都是最基本的数据输入输出。selected对象利用AngularJS的双向绑定很容易实现数据的输入输出,当然你们通过公开回调函数来实现,但没指定双向绑定属性方便。

disabled参数保证了Web表单组件的完整性,原生的下拉框组件也的这个属性。

三、编码实现

确定接口后,请参看https://github.com/szriafan/angularjs-ui-bootstrap-enhancement/blob/master/components/riaSelect.js编码,是不是很easy?先点击此处查看效果

参考资源:

发表评论

电子邮件地址不会被公开。 必填项已用*标注