AngularJS / CSS - 如何将选择框的宽度设置为$ scope的值？

Question

我有两个选择框。第一个是改变第二个的入口。第二个总是将其长度调整为实际条目中最长的一个。但是当我选择第一个框中的另一个项目时宽度总是会改变的话，它看起来很难看。

是否可以将第二个框的宽度设置为固定值，由整个（未过滤的）第二个框元素列表的最长元素计算？在范围内，我可以计算最长元素的字符数。我能以某种方式将其调整到宽度吗？

我已经尝试过（进行测试）

<select ... style="width:{{getMaxLength()}}px" > </select>

通过范围中的方法getMaxLength（）返回字符数。但它并没有改变任何事情。

有没有人试过这个？使用ng-attr-size设置大小是有效的，但它的高度对我毫无帮助。

我很欣赏每一个提示或想法！ 贾纳

---

增加：
我的例子没有使用答案，因为我没有给出＆＃34; name＆＃34; 属性。然后 Muhammad Reda 的答案运作良好，我确信大多数其他想法也会奏效。通过非常彻底地比较Muhammads plunker和我的代码我发现了。这是唯一的区别。

Answer 1

您可以使用ngStyle

来自文档：

  

ngStyle指令允许您有条件地在HTML元素上设置CSS样式。

示例：

<select ng-style="{'width': getMaxLength() + 'px'}"></select>

Plunker

Answer 2

使用此ng-style="{'width': {{getMaxLength()}} + 'px'}"代替style元素

Answer 3

ng-style="customStyle" ..

并在你的控制器中，

$scope.customStyle = {'width':$scope.getMaxLength()}