Angular JS选择手动选项 [英] Angular JS select with manual options

问题描述

我们的应用中有一些下拉菜单，我们可以不使用 ng-options ，因为我们需要在< options>上设置title属性标记本身，这是 ng-options 无法实现的。

We have some drop downs in our app that we can NOT use ng-options with because we need to set the title attribute on the <options> tag itself which is not possible with ng-options.

我们需要标题的原因是因为IE< 9砍掉长的值，只有标题可见（显示在元素悬停时）

现在，看看问题我正在看下面的JS小提琴。

Now, to see the issue I'm having look at the following JS fiddle.

http://jsfiddle.net/nstuart/nF7eJ/
（HTML位）

http://jsfiddle.net/nstuart/nF7eJ/ (HTML Bit)

<div ng-app="myApp" ng-controller="MyCtrl">
    <select ng-model="params.value">
        <option value="">Any</option>
        <option ng-repeat="v in options" value="{{v.value}}" title="{{v.name}}" ng-selected="{{v.value == params.value}}">{{v.name}}</option>
    </select>
    <p>{{params.value}}</p>
</div>

理想情况下，选择会选择test3，但你可以看到它被设置为一个空选项。我理解这是因为ng-model的值不存在于 ng-options 中，但那是因为我没有定义一个！

Ideally the select would have 'test3' selected, but you can see it gets set to an empty option instead. I understand this is from the fact that the value of ng-model is not present in the ng-options, but thats because I have not defined one!

关于如何获得这样的工作的任何想法？可能甚至可以为ng-options生成的选项添加标题，以便我们可以使用它？

Any ideas on how to get something like this working? Possibly even be able to add title to the options generated by ng-options so we could use that instead?

编辑

更新了小提琴： http://jsfiddle.net/nstuart / nBphn / 2 / 如下面的答案中所述。

Updated the fiddle at: http://jsfiddle.net/nstuart/nBphn/2/ to as described in the answer below.

推荐答案

实际上，只需删除大括号在ng-selected中的表达式将起作用：

Actually, just remove the curly braces from the expression in ng-selected and it will work:

<option ng-repeat="v in options" 
        value="{{v.value}}" 
        title="{{v.name}}" 
        ng-selected="v.value == params.value">{{v.name}}
</option>

小提琴

这篇关于Angular JS选择手动选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！