(八) Select控件的使用

继续前一篇，让其他的filter也动起来，首先让下拉列表动起来。

下拉列表，在fiori中控件的名称为Select，可以先看下用法https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.Select/preview。都完成之后的controller代码结构如下，之后把代码分块对应到这张图上。标识部分是新增的两个方法。

Select控件功能比较独立，单独声明一个model, ageModel。考虑到用户选择了某个年龄之后，有可能想查看全部结果，所以列表应该是可逆的。为了达到可逆效果，在数据源中this.ages中默认添加all选项。

修改一下getTableData方法，将age字段提取出来，让setAges方法加工一下，然后把this.ages数据放到ageModel中。

看下setAges方法如何加工的。首先肯定是要去重（for循环部分），如果在this.ages数组中未发现当前的年龄，则给年龄添加一个index构成对象，push到this.ages数组中。Select控件的model就搞定了。

然后把数据绑定到页面上，这步和table的操作很像。此处必须要给控件的id属性赋值，fiori开发中经常会用到id属性。按照table的方式给items赋值，selectedKey属性表示默认选中项，这里默认选中第0项。<core:Item>用来显示下拉选项。

运行应该能看到一下效果。如果没看到，检查下之前的步骤。

现在给Select控件添加change方法，当选项变化后，刷新下方的列表。可能已经猜到了，又用到了之前search的filter。来看下ageChange方法，详细说下。

fiori比较不同于其他的js框架，不能在html页面调用方法的时候直接传参数给controller，这就尴尬了。所以每次有点击事件的地方，几乎都会用到获取当前所点击项的index，然后再用index去数据里找到所选项。然后就是上一篇提到的filter的用法了。
后边的判断，一定要加上，这个应该是Select控件的bug，选择all触发change方法后，值并不能准确的给出来。

一切搞定，运行下。