.chose-hide { position: absolute!important; top: -999em !important; } .chose-container { border: none!important; float: left; margin-right: 40px; padding: 0!important; position: relative; } .chose-container .chose-single { padding: 6px 12px; color: #333; width: 100%; border: 1px solid #eee; display: inline-block; height: 30px; } .chose-container .chose-single::after { content: ''; position: absolute; border-width: 6px 3px; border-style: solid; /* border-top-color: transparent; */ border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; right: 8px; top: 12px; } .chose-container .chose-single i { width: 12px; float: right; right: 8px; font-size: 12px; height: 12px; background-color: #eee; } .chose-container .chose-drop { width: 195px; position: absolute; border: 1px solid #eee; z-index: 1000; background-color: #fff; } .chose-container .chose-search input[type='text'] { margin: 0; padding-left: 12px; width: 100%; height: 30px; border: 1px solid #ccc; float: none; } .chose-container .chose-result { max-height: 370px; overflow-y: scroll; overflow-x: hidden; } .chose-container .chose-result li { padding: 5px 12px; list-style-type: none; } .chose-container .chose-result li:hover { background-color: #e1e2e7; }
1.3 使用及效果
<select ngc-select-search ng-model="aa.b" ng-options="obj.countryId as obj.countryCnName for obj in vm.countries"> <option value="">请选择</option> </select>
2.详细说明
程序中的关键点是parseOptions函数，即前面分析里的问题1。parseOptions是参考ng-options的源码实现的，原来是想返回一个对象，这个对象里包含了数据源，但是在调试时，发现post函数中该函数返回对象里的数据为空，watch不到，所以改为用scope.options来存数据。