Question

我有一个选择。 select中的一些选项非常非常长，并且select的空间非常短。由于非原生选择设计黑客的原因，我需要当前选择的选项文本比选择元素实际占用的空间短。

我希望元素处于活动状态时显示全文，例如显示所有选项时。一旦选择了一个对象并且该元素未激活，我想要显示一个较短的文本。

我可以通过隐藏选择并将缩短的文本放在绝对位于select之上的元素来实现这一点，但这会带来一个跨浏览器痛苦的世界 - 隐藏选择，同时允许它在被点击时激活EXTREMELY变量不同平台的结果。

Here's a Plunkr展示了这种技术的一个例子。

<div class="has-select">
  <select ng-model="activity" ng-options="c.name for c in options" ng-init="activity = options[0]">
  </select>
  <span class="short">
    {{ activity.name | limitTo: 30 }}
  </span>
</div>

是否有人知道如何使用标准选择标记而不依赖其他元素？

Answer 1

实现这一目标存在一些问题：

你不能在Angular的ng-option中使用智能“子串”功能，因为这会导致重新绑定。
即使你有一个逻辑触发的子字符串，这也不会影响它处于活动状态时的“下拉列表”，看起来浏览器（至少是Chrome）会在ng-click发生之前绑定下拉列表中的数据， badly written example here

我的建议是使用类似于FlatUI的“自定义选择”实现（当然是Angular风格！）。这可能是实现这一目标的最不痛苦的方法。

如何在AngularJS选择中显示当前所选选项的缩短文本？

1 个答案: