我在 angularjs 中使用 select 和 ng-options 来显示我自己构建的年份列表。我将当前年份作为默认值传递给选择。
这里是 plunker link .
我的问题是:
如何让列表以默认值居中？ 我的 plunker 不完整，因为我的真实情况就像在这里找到的一样 http://www.cliptheme.com/demo/clip-two/AngularJs-Admin/STANDARD/#/app/form/wizard
转到表单/表单向导/第 3 步账单
如您所见，通过选择年份，然后再次点击它，菜单会以所选年份为中心。
但我的问题是，当我将默认年份值传递给它时，就好像我已经选择了一样，然后我单击返回列表，我应该看到它以该默认值为中心，但事实并非如此。一旦我再次点击那一年，并再次点击列表，我就会看到它居中。
换句话说，将年份作为默认值传递与我第一次通过单击选择它时所起的作用不同，因为当我再次单击时，它不会居中。我们如何解决这个问题？
这是我正在使用的选择器的 CSS 文件:css link ，这既不包含在 plunker 中，也不包含在代码片段中，因为我无法在 plunker 上正确重现该 CSS，如果可以，请这样做。
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope) {
$scope.dates = {};
$scope.years = [{value: 'Year', disabled: true}];
var current_year = new Date().getFullYear();
for(var i = current_year - 20; i <= current_year + 20; i++){
$scope.years.push({value: i + ''});
}
var d = new Date();
var n = d.getFullYear();
$scope.dates.startYear = n;
}); <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="MyCtrl">
<label class="control-label">Year</label>
<select name="startYear" ng-model="dates.startYear" id="startYear"
ng-options="year.value as year.value disable when year.disabled for year in years"
required>
<option value="" disabled >Choose one</option>
</select>
</div>
</body>更新 1:
这是处理这个特定元素的指令:
更新2:
即使在 Dekel 的解决方案之后，这个 plunker 也能准确显示问题。 https://plnkr.co/edit/aWbZkp4xitvBcMmhHadI?p=preview
如您所见，在页面加载时，当点击下拉菜单时，它不会以默认值为中心。
最佳答案
First I gotta say that the
<select>tag is not a standard tag, since the rendering of that tag is partially done by the OS and not the browser, so it behaves a little different then other elements, and you can't really apply css to everything you need there.
话虽如此 - 总有(几乎)可以完成的黑客攻击，我将展示这个例子作为黑客攻击之一:
function selectfocus() {
el = event.target;
sizeWhenOpen = 5;
el.size=sizeWhenOpen;
totalHeight = el.getBoundingClientRect().height;
heightPerOption = el.scrollHeight/el.options.length;
currentIndex = el.selectedIndex;
el.scrollTop = heightPerOption * (currentIndex - Math.floor(sizeWhenOpen/2));
}<select
onfocus="selectfocus()"
onblur="this.size=1;"
onchange="this.size=1; this.blur();">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
</select>因为我们无法控制在 <select> 时显示的元素数量。是打开的，我使用了两种状态——一种是关闭时(大小=0)，另一种是打开时(示例中大小=5)。 When the select is open - I took the current selected option (based on the index) and scrolled the select to the relevant position do make sure it's centered.
Another important note - inside your application you might need use css to position (absolute/relative) the select/it's container in order to keep the original size (the size when open is bigger than the size when closed).
这是 Angular 版本，基于您的 plunkr:
https://plnkr.co/edit/eV1sPxENpcO1xXcS6JL3?p=preview
Final note - If you need exact things from the
<select>tag in your website - use an implementation of drop-down that is based on regular html elements and not select :)
关于javascript - 选择下拉菜单中的 css 中心默认值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45536782/